クッキー(Cookie)

クッキーとはインターネットブラウザの機能の一つで、 サーバーから送られた情報を ブラウザ側のマシンに一時的なファイルで保存します。
そして記憶した情報は、書き込みを指示した同じサーバーに対して、送り返す仕組みです。
これにより 以前に閲覧した時の情報をサーバに送ることができ、 ショッピングサイトの嗜好情報など、以前に閲覧した情報を利用したサイトの制作が可能になります。

クッキー情報は、サーバーサイドからクライアントマシンに対して、 許可される唯一のファイル操作でした。
(なお現在では、アドオンソフトやAcriveXのインストール状況によって、サーバーサイドからクライアントマシンのローカルファイルをアクセスする技術が他にも存在します。)
クッキーは、ブラウザにあるクッキーファイルの保存や参照の機能を、ブラウザがページを閲覧する時の応答メッセージで指示する仕組みです。

クッキー情報を保存するファイル名や記憶方法は、 OSやブラウザによって記憶方法が異なります。 WindowsXPで、IE7を使った時は、以下の位置に書き込まれるようです。
C:\Documents and Settings\ユーザー名\Local Settings\Temp\Cookies
Windows8.1で、IE11を使った時は、以下の位置に書き込まれるようです。
C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\INetCookies

ファイルに記憶される情報は様々ですが、それらは「名前に対する設定値」の集合で記憶されます。

まず有効期限(expires=)の名前に対する設定値指定がある場合、その期限がくると、クッキーの情報を参照できなくなります。
この有効期限が無いクッキーはブラウザを閉じると、クッキーファイルは削除されます。(一般にクッキーを削除する場合、有効期限を過去にして書き込むことで行います)

また、ドメイン(domain=)の名前に対する設定値指定がある場合、そのドメイン以外に以前に記憶したクッキー情報 を送出しません。。(サーバーから見た場合、ドメインに指定されていなければ、クッキー情報を参照することができません。この仕組みでセキュリティが確保されます。)

また、パス(path=)の名前に対する設定値指定がある場合、この設定値の範囲で一致する閲覧ページだけに クッキー情報が送出されます。そしてパス の設定がない場合は、その書き込みページの要求でしか取得ができないようにブラウザが作られています。

このようにクッキーはサーバー側からHTML応答のHTTPヘッダーでクッキーの操作指示が行われます。
ですが、javascriptでのプログラム制御も可能で、以下でその例を紹介します。

javascript でクッキーが使えるかの判定を行う。

クッキーの書き込みが可能かどうかを、次に示します。true表示なら可能、falseなら不可です。
<span id="span01"> false </span>
この表示は、次のコードで行っています。
document.getElementById("span01").innerHTML=navigator.cookieEnabled;

javascript で現在のクッキーの設定値を確認する方法、また書き込む方法。

現在のクッキーは次のようになっています。下記spanで囲っている内容です。
ここで「PHPSESSID」はこのラーニングシステムで使っている名前です。

<span id="span02"> </span>

上記のクッキーの表示は、次のコードで行っています。
document.getElementById("span02").innerHTML=document.cookie;
なお、クッキーの値にはセミコロン ( ; )、カンマ ( , ) や空白を含めてはならないため、書き込む値はencodeURIComponent()でエンコードするのがよいでしょう。

クッキー書き込み用フォーム (この操作で 上記のクッキー表示情報が変化します)

下の「書き込む」ボタンでクッキーを書き込む時、有効期限(expires=)をクリックして後から30秒の時間に設定しています。
そして、「password」の名前設定値にテキストフィールドに入力した文字列を指定しています。
このボタン操作後に、クッキーで記憶したpasswordの設定値が、更新ボタン後でも見えることに注目してください。
そして、30秒後の更新ボタンで消えることを確認することができます。


このボタンでクッキーが書き込めます→
←ホスト名とパスをクッキーにセット

上記のformのソースは次のようになっています。
<form name="frm2">
<label for="txt2">passwordの名前で書き込むクッキーの値入力用</label>
<input type="text" name="nametxt2" size="20" id="txt2"><br>
このボタンでクッキーが書き込めます→
<input type="button" value="書き込む" onclick="setCookie()"> <br>
<input type="checkbox" name="chb2" checked >←ホスト名とパスをクッキーにセット </form>

そして、「書き込む」ボタンで実行するsetCookie()の定義は次のようになります。

	function setCookie(){
		var s = document.frm2.txt2.value;
		var d = new Date();
		var t = Date.parse(d);
		t += 30 * 1000;//30秒後
		d.setTime(t);
		 
		s = "password=" + s;
		s += ";expires=" + d.toGMTString();
		if(document.frm2.chb2.checked=="true"){
			s += ";domain=" + location.hostname;
			s += ";path=" + "/up";
		}
		s = prompt("この文字列をCookieとして書き込みます。",s);
		document.cookie=s;
	}

クッキー書き込みの実験ページです。 このページで有効期限が 1分の任意クッキーを設定する実験ができます。
これは、テキストエリアのデータをクッキーとして設定できます。 デフォルトは現在時間が設定済みの例になっています。

これは、クッキーの削除実験ページです。 クッキーの名前を指定して削除する例です。