JavascriptでCookieに書き込むコードを紹介します。
単純なCookieへの書き込み
コード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function onload() {
document.cookie = "value=Penguin;";
document.getElementById("msg").innerHTML = "Cookieに書き込みました。";
}
</script>
</head>
<body onload="onload();">
<div id="msg"></div>
</body>
</html>
解説
Cookieを書き込む場合は、document.cookie への代入をします。
Cookieは
(キー名)=(値)
の形式で書き込みます。
有効期限を付与する場合
コード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function onload() {
document.cookie = "value=Penguin; max-age=86400;";
document.getElementById("msg").innerHTML = "Cookieに書き込みました。";
}
</script>
</head>
<body onload="onload();">
<div id="msg"></div>
</body>
</html>
解説
有効期限を設定する場合は、Cookieに書き込む値の末尾に";"を記述しその後ろに "max-age"でCookieの有効期限を設定します。数値の単位は秒になります。
86400=60*60*24 でCookieの有効期限は1日となります。
有効範囲を指定する場合
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function onload() {
document.cookie = "value=Penguin; max-age=86400; path=/data/";
document.getElementById("msg").innerHTML = "Cookieに書き込みました。";
}
</script>
</head>
<body onload="onload();">
<div id="msg"></div>
</body>
</html>
解説
有効範囲は"path"で指定します。指定したディレクトリより下位のディレクトリでCookieへのアクセスが可能になります。指定したディレクトリの上位ディレクトリではCookieへのアクセスはできなくなります。
日本語など ASCII文字以外を書き込む場合
日本語など、ASCII文字でない文字をCookieに書き込む場合は、encodeURIComponent()関数を利用してエンコード処理をします。ASCII文字を利用する場合でも";"や","文字の処理がされるため、不定のASCII文字が与えられる場合も利用したほうが良いかもしれません。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function onload() {
document.cookie = "value="+encodeURIComponent("美しい水の国日本")+"; max-age=3600;";
document.getElementById("msg").innerHTML = "Cookieに書き込みました。";
}
</script>
</head>
<body onload="onload();">
<div id="msg"></div>
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2015-12-17
作成日: 2015-12-16
