<script type="text/javascript">
<!--
if (window.navigator.cookieEnabled) {
document.write("クッキーは利用できます。"); // クッキーの受け入れが有効時の処理
}
else {
document.write("クッキーは利用できません。"); // クッキーの受け入れが無効時の処理
}
// -->
</script>
if (!navigator.cookieEnabled) {
document.write("ブラウザの設定にてクッキーの受け入れを有効にしてください。");
}
クッキーが利用可能であれば navigator.cookieEnabled は真 (true) になりますので、真偽値をチェックして使用可能かどうかを判別することができます。なお、window は省略することができます。
<script type="text/javascript"> <!-- var name = "testcookie"; // クッキーの名前 var value = 1; // クッキーの値 var period = 7; // 有効期限日数 // 発行したクッキーの取得(読み込み) if (document.cookie) { var cookies = document.cookie.split("; "); for (var i = 0; i < cookies.length; i++) { var str = cookies[i].split("="); if (str[0] == name) { var cookie_value = unescape(str[1]); if (!isNaN(value)) value = ++cookie_value; break; } } } window.status = value; // 有効期限の作成 var nowtime = new Date().getTime(); var clear_time = new Date(nowtime + (60 * 60 * 24 * 1000 * period)); var expires = clear_time.toGMTString(); // クッキーの発行(書き込み) document.cookie = name + "=" + escape(value) + "; expires=" + expires; // --> </script>
初めに作成する任意のクッキー名と値を変数 name と value に指定してください。この例はページが読み込まれた回数をクッキーに書き込みますので、値は初期値として 1 を指定しておきます。変数 period にはクッキーの有効期限の日数を指定してください。
クッキーを取得するには、document.cookie を使用して発行されたクッキーのドメイン値とパス値が含まれているクッキーを探します。セキュリティ上、クッキーのドメインとパスが一致しないクッキーを取得することはできません。
複数のクッキーが存在する場合には「名前=値; 名前=値; 名前=値」といったように「; 」で区切られて document.cookie に格納されていますので、split() を使用して各クッキーの「名前=値」を変数 cookies に配列として格納します。
取得したクッキーは「名前=値」のように「=」のペアになっていますので、split() を使用して名前と値に分割して変数 str に配列として格納します。これにより、str[0] がクッキーの名前、str[1] がクッキーの値となります。
ここで目的のクッキー名(変数 name)と一致したクッキーの値を unescape() でデコードして取得します。今回はこの取得したクッキー値(変数 cookie_value)をカウントアップするために、インクリメントして変数 value に代入します。インクリメントは変数 value に代入してから +1 されることに注意してください。
そして変数 value をクッキーに書き込みます。クッキーを作成するには、クッキーに必要な値(名前=値、有効期限等)を「; 」で区切って document.cookie に代入します。なお、一番最後の値に区切り文字「;」は不要です。(記述しても作成はされます)
document.cookie = name + "=" + escape(value) + "; expires=" + expires; | | | | | | | | | | |_ 名前 |_ 値 | |_ 有効期限 |_ 有効期限の値 |_ 区切り
有効期限を設定するために有効期限の値(変数 expires)を作成します。この有効期限が過ぎたクッキーは削除されます。expires= を記述しないで有効期限を省略した場合はセッション中のみ有効のクッキーとなります。これはブラウザを全て終了すると自動的に削除されます。
document.cookie = name + "=" + escape(value);
上記のようにそれぞれの値を document.cookie を使用してクッキーを作成します。クッキーの値には、使用出来ない文字(セミコロン、カンマ、スペース)と2バイト文字やクッキーに使用するイコールがそのまま記録されないように escape() でエンコードした値を書き込みます。
発行したクッキーの参照可能なサイト (URL) として domain 値と path 値がありますが今回は省略していますので、domain 値は発行したページのホスト名(ドメイン)、path 値は発行したページのカレントディレクトリのパスが自動的に設定(JavaScript による作成の場合)されますので、このクッキーは発行したページのディレクトリ内のページからは参照可能になります。
基本的に他ドメインのクッキーはセキュリティ上作成することはできません。たとえば、現在のページのドメインが plala.or.jp の場合に domain=example.com のようなクッキーを発行しようとしても作成されません。
http://www.plala.or.jp/ 内のサイトでは、ホスト名が www.plala.or.jp なので domain=www.plala.or.jp (domain=plala.or.jp) のドメイン値を設定することができます。(document.domain や location.hostname を使用すると現在のホスト名を取得することができます)
ただし、domain=plala.or.jp (domain=.plala.or.jp) とすると plala.or.jp が含まれる全てのサイトにクッキーが送信されますので、www.plala.or.jp や www9.plala.or.jp でも参照可能になります。(便利かもしれませんがある意味危険です)
パス値(クッキーを参照できるページ)は任意に指定することができます。作成元のパス値を明示的にするには以下の青文字の部分を追加してください。同一サーバ内で読み書きをされる場合は path=/ としてください。
document.cookie = name + "=" + escape(value) + "; path=" + location.pathname + "; expires=" + expires;
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + expires;
セキュリティホールによるクッキーの漏洩等も考慮して、重要なデータの場合は長期保存しない方が良いと思います。また、パスワード等を保存する場合には、CGI を用いて暗号化(perl の crypt 関数を使用するなど)して作成したほうが良いと思います。
なお、ブラウザのアドレスバーにクッキーを作成する JavaScript のコードを実行すると、閲覧中のサイトのドメインを持つ任意のクッキーを作成することも可能なので、クライアントから送られてくるクッキーの値は安全とは限らないのでご注意ください。
この例では、クッキーの受け入れが有効なときにこのページをアクセスした回数がステータスバーに表示されます。また、document.write() 等を使用して表示することもできます。
※このページのクッキーはブラウザを終了すると破棄されますので PC には保存いたしません。(ステータスバーに表示されない場合はこちらをクリックするとアラート表示します)
ここまでの例はクッキーの仕組みについて作成したので実用的ではありません。取得可能な任意のクッキーの取得や指定した値のクッキーを作成するには以下のようにします。このようにすると一度に複数のクッキーの取得、発行も可能です。
<script type="text/javascript"> <!-- // クッキーの取得 var COOKIE = new Array(); if (document.cookie) { var cookies = document.cookie.split("; "); for (var i = 0; i < cookies.length; i++) { var str = cookies[i].split("="); COOKIE[str[0]] = unescape(str[1]); } } // クッキーの発行 function setCookie(name, value, domain, path, expires, secure) { if (!name) return; var str = name + "=" + escape(value); if (domain) { if (domain == 1) domain = location.hostname.replace(/^[^\.]*/, ""); str += "; domain=" + domain; } if (path) { if (path == 1) path = location.pathname; str += "; path=" + path; } if (expires) { var nowtime = new Date().getTime(); expires = new Date(nowtime + (60 * 60 * 24 * 1000 * expires)); expires = expires.toGMTString(); str += "; expires=" + expires; } if (secure && location.protocol == "https:") { str += "; secure"; } document.cookie = str; } // --> </script>
var cookieName = "count"; var cookieValue = isNaN(COOKIE[cookieName]) ? 0 : COOKIE[cookieName]; // count というクッキー名の値を取得 window.status = ++cookieValue; // クッキー値(カウント)の更新と表示 setCookie(cookieName, cookieValue, "", "", 7); // クッキー発行
クッキーを取得するには、読み込み可能なクッキーをチェックして存在すればクッキーを配列の変数 COOKIE に格納します。そして、取得したいクッキー名を配列の名前とすることでクッキーの値を取得することができます。たとえば、count というクッキー名の値を取得するには、COOKIE["count"] (もしくは COOKIE['count'])とします。
クッキーを発行するには、関数 setCookie の引数に指定したクッキーを作成(削除)します。
引数の値 | クッキー名 | クッキーの値 | ドメイン | パス | 有効期限 | セキュアフラグ |
---|---|---|---|---|---|---|
setCookie("Test1", "あいうえお"); | Test1 | あいうえお | 発行したサーバ | 発行したカレントディレクトリ | セッション中のみ | なし |
setCookie("Test2", "100", "", 1, 3); | Test2 | 100 | 発行したサーバ | 発行したページ | 3日 | なし |
setCookie("Test3", "1", "", "/", 1); | Test3 | 1 | 発行したサーバ | 発行したサーバ | 1日 | なし |
setCookie("Test3", "", "", "/", -1); | Test3 | 発行したサーバ | 発行したサーバ | 削除 | なし |
また、クッキーを配列として取得するのではなく個々に取得したい場合は以下のようにしてください。
<script type="text/javascript"> <!-- function getCookie(name) { if (!name || !document.cookie) return; var cookies = document.cookie.split("; "); for (var i = 0; i < cookies.length; i++) { var str = cookies[i].split("="); if (str[0] != name) continue; return unescape(str[1]); } return; } function setCookie(name, value, domain, path, expires, secure) { if (!name) return; var str = name + "=" + escape(value); if (domain) { if (domain == 1) domain = location.hostname.replace(/^[^\.]*/, ""); str += "; domain=" + domain; } if (path) { if (path == 1) path = location.pathname; str += "; path=" + path; } if (expires) { var nowtime = new Date().getTime(); expires = new Date(nowtime + (60 * 60 * 24 * 1000 * expires)); expires = expires.toGMTString(); str += "; expires=" + expires; } if (secure && location.protocol == "https:") { str += "; secure"; } document.cookie = str; } // --> </script>
var cookieValue = getCookie("count"); // count というクッキー名の値を取得 if (isNaN(cookieValue)) cookieValue = 0; // クッキー値のチェック window.status = ++cookieValue; // クッキー値の更新と表示 setCookie("count", cookieValue, "", "", 7); // クッキー発行
この場合は、関数 getCookie の引数に取得したいクッキー名を渡して呼び出すとそのクッキーの値を返します。たとえば、var cookieValue = getCookie("count"); とすると count という名前のクッキーが存在すれば変数 cookieValue にその値が代入されます。