クッキーの利用判別
<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 に代入します。なお、一番最後の値に区切り文字「;」は不要です。(記述しても作成はされます)

書き込む値は「名前=値; expires=有効期限の値」となります
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 の引数に指定したクッキーを作成(削除)します。

第1引数 - クッキー名
発行するクッキーの名前を指定してください。(必須)
第2引数 - クッキーの値
発行するクッキーの値を指定してください。
第3引数 - ドメイン
参照可能なドメインを指定してください。指定しない場合は省略するか、以下の「0」か「1」のいずれかを記述してください。
0: 発行したサーバ(省略時と同じ) 1: 発行したドメイン名が含まれるサーバ
第4引数 - パス
参照可能なパスを指定してください。指定しない場合は省略するか、以下の「0」か「1」のいずれかを記述してください。
0: 発行したカレントディレクトリ(省略時と同じ) 1: 発行したページ
第5引数 - 有効期限
有効期限の日数を指定してください。12時間の場合は 0.5 のようにしてください。
セッション中のみ有効にする場合は省略するか「0」、このクッキーを削除する場合は「-1」としてください。
第6引数 - セキュアフラグ(SSL 通信時のみ指定可)
SSL (https) 通信時のクッキーの暗号化を指定してください。(0: 無効 1: 有効)
クッキーの作成例
引数の値 クッキー名 クッキーの値 ドメイン パス 有効期限 セキュアフラグ
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 にその値が代入されます。

[PR] Yahoo!ショッピング