JavaScriptでのCookie操作

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>

このページのキーワード

JSでCookieにデータを書き込むコード

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

作成日: 2015-12-16

目次