javascriptでcookieを読み書きする場合について
cookieの操作はdocument.cookie変数に対して行う。
読み込む際は、「var str = document.cookie;」と行えばstrにcookieの中身が全て格納される。
cookieは"名前=値; 名前=値; 名前=値; ..."という形式で入っているので、文字列を分割して必要な値のみを使用する。
書き込む際は、「document.cookie = "cookie名=値; expires=賞味期限";」と行えば書き込まれる。
複数のcookieを書き込む際は、それぞれをdocument.cookieに対して格納する。
「document.cookie = "cookie名=値; cookie名=値; expires=賞味期限"というような記載はNG。
<html><head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>JavaScriptCookie</title>
<script language="javascript">
<!--
var ckary = new Array();
var delimiter = "%00";
function setck()
{
ckary[0] = document.forms[0].usr.value;
ckary[1] = document.forms[0].eml.value;
ckary[2] = document.forms[0].url.value;
// alert ('◎フォームの内容\n'+ckary[0]+' '+ckary[1]+' '+ckary[2]);
var saveDay = 365;
var exp = createRimit(saveDay);
var ckstr = escape(ckary[0]);
var i = 1;
while (ckary[i]){
ckstr += delimiter + escape(ckary[i]);
i++;
}
// alert ('◎ESCAPEされた文字列'+ckstr);
document.cookie = "TEST=" + ckstr + "; expires=" + exp.toGMTString();
// TESTの他にTEST2も用意するなら以下のように記載。
// document.cookie = "TEST2=" + ckstr + "; expires=" + exp.toGMTString();
}
function createRimit(pSd)
{
var exp = new Date();
exp.setTime(exp.getTime()+1000*60*60*24*pSd);
return exp;
}
function getck()
{
// alert ('◎cookie文字列全体\n'+document.cookie);
ckary = document.cookie.split("; ");
var ckstr = "";
var cktarget = "TEST=";
var cklen = cktarget.length;
var i = 0;
while (ckary[i]){
if (ckary[i].substr(0,cklen) == cktarget){
ckstr = ckary[i].substr(cklen, ckary[i].length);
break;
}
i++;
}
// alert ('◎抽出された文字列\n'+ckary[i]);
ckary = ckstr.split(delimiter);
if (ckary[0]) document.forms[0].usr.value = unescape(ckary[0]);
if (ckary[1]) document.forms[0].eml.value = unescape(ckary[1]);
if (ckary[2]) document.forms[0].url.value = unescape(ckary[2]);
}
function reset()
{
document.forms[0].usr.value = "";
document.forms[0].eml.value = "";
document.forms[0].url.value = "";
}
// -->
</script>
</head><body onload="getck()" bgcolor="#ffffff">
<form>
<input value="test" name="usr" size="40" type="text"><br>
<input name="eml" size="40" type="text"><br>
<input name="url" size="40" type="text"><br>
<input value="記録" onclick="setck()" type="button">
<input value="呼び出し" onclick="getck()" type="button">
<input value="リセット" onclick="reset()" type="button">
</form>
</body></html>
2011-01-02
最終更新：2011年01月02日 02:36
