JavaScriptでCookieを扱いたい時のメモ

昨年末は、あれ？私コーダーだったっけ？ってぐらいにHTMLとCSSとJavaScriptとPHPの勉強と作業しかしていませんでした。
その頃作業していたお仕事は要求されるレベルも予想以上に高く、作業しつつも勉強勉強という感じで、振り返るとなかなかに充実したお仕事だったなぁと思います。
そんなお仕事で改めてCookieについてきちんと勉強したのでメモしておきます。

そもそもCookieとは

Webサイトの提供者が、Webブラウザを通じて訪問者のコンピュータに一時的にデータを書き込んで保存させるしくみ。
（引用元：http://e-words.jp/w/Cookie.html）

例えば、初めて訪問したサイトで名前を入力したら、次回訪れた際に入力した名前で呼ばれたり。
例えば、訪問した回数を記録していて、訪れる度に何回目の訪問か教えてくれたり。
そういうことができます。

JavascriptでCookieを焼いたり読んだり

Cookieには「好きな名前＝好きな値」という形で保存ができます。
また合わせて、「Cookieの有効期限（expires）」「Cookieを発行したドメイン（domain）」「Cookieを利用できる範囲（path）」「セキュアな時だけ利用可能にする（secure）」も指定できます。

Cookieを焼く

// クッキー保存　setCookie(クッキー名, クッキーの値, クッキーの有効日数); //
function setCookie(c_name,value,expiredays){
	// pathの指定
	var path = location.pathname;
	// pathをフォルダ毎に指定する場合のIE対策
	var paths = new Array();
	paths = path.split("/");
	if(paths[paths.length-1] != ""){
		paths[paths.length-1] = "";
		path = paths.join("/");
	}
	// 有効期限の日付
	var extime = new Date().getTime();
	var cltime = new Date(extime + (60*60*24*1000*expiredays));
	var exdate = cltime.toUTCString();
	// クッキーに保存する文字列を生成
	var s="";
	s += c_name +"="+ escape(value);// 値はエンコードしておく
	s += "; path="+ path;
	if(expiredays){
		s += "; expires=" +exdate+"; ";
	}else{
		s += "; ";
	}
	// クッキーに保存
	document.cookie=s;
}
// クッキーをセット
window.onload = setCookie('testName','sample',7);

という感じで、「testName=’sample’」という値を有効期限は７日でCookieにセットできました。

Cookieを呼び出す

// クッキーの値を取得 getCookie(クッキー名); //
function getCookie(c_name){
	var st="";
	var ed="";
	if(document.cookie.length>0){
		// クッキーの値を取り出す
		st=document.cookie.indexOf(c_name + "=");
		if(st!=-1){
			st=st+c_name.length+1;
			ed=document.cookie.indexOf(";",st);
			if(ed==-1) ed=document.cookie.length;
			// 値をデコードして返す
			return unescape(document.cookie.substring(st,ed));
		}
	}
	return "";
}
// クッキーの値をアラートで表示
function checkCookie(){
	if(getCookie('testName')){
		var setName = getCookie('testName');
		alert(setName);
	}
}

という感じで書き、onclickなどでcheckCookie()を呼び出せば、アラートにセットしたtestNameの値を表示できます。

サンプル１

実際はアラートよりも文字を書き出したりすることが多いとは思いますので、下記サンプルを参考にしてみてください。

サンプル２

Cookieの値を消すには？

Cookieを扱うテストをしてるとき等、一回セットしたCookieを削除したい、なんてこともありますね。
その場合は、有効期限を過去にするか、空の値を（testName=”という感じで）セットしてやることで可能です。

Cookieの利用判定はcookieEnabledでは不十分

「Cookieが利用可能かどうか判定をしたい」という場合、いろんなサイトで「navigator.cookieEnabled」でtrueかfalseかを判定するよう書かれていますが、IEの場合、必ず「true」が返ってきます。

その場合は、先に１度適当なCookieを焼き、それを読み出せるかどうか、で判定をすることができます。

サンプル３

各ブラウザのCookieをチェックする方法

Cookieの挙動って目に見えなくて、ホントにセットできてるの…？ってなりますよね。
そんなときは、以下の方法でチェックしてみてください。

IE

Cookieを確認したいページを開き、URLアドレスバーに「javascript:document.cookie;」を入力するとそのページで使用されているCookieが表示出来ます。
また、ツール＞F12 開発者ツール で開発者ツールを開き、キャッシュ＞Cookie情報を表示する でチェックすることも出来ます。

Firefox

環境設定＞プライバシー　の中に「Cookieを個別に削除」というリンクがあるのでクリック
サイト毎にCookieがまとめられているので、確認してみましょう。
また、「Web Developer」というアドオンを入れていれば、Cookie＞Cookie情報を表示　でチェックする事も出来ます。

Chrome

環境設定＞設定＞詳細設定を表示＞プライバシー：コンテンツの設定＞Cookie：すべてのCookieとサイトデータ
でサイト毎のCookieを確認出来ます。
また、メニューバーの 表示＞開発/管理＞デベロッパーツール でデベロッパーツールを表示し、Resourcesタブ内のCookiesでチェックする事も出来ます。

Safari

メニューバーの 開発＞Webインスペクタを表示 でWebインスペクタを表示し、リソースタブ内のCookieでチェックする事が出来ます。
（メニューバーに開発がない場合は、環境設定＞詳細タブの下の方にある「メニューバーに”開発”メニューを表示」にチェックを入れてください）

また、日本語等の２バイト文字は普通に保存したり表示したりすると文字化けしてしまうので、上記コードにもあるように途中でエンコード／デコードの処理をしています。
上記サンプルを利用して、日本語で保存した場合のCookieを確認するとエンコードされた文字列になっていると思いますので、そこもチェックしてみてください。

※IEとChromeとSafariはローカルファイルでテストしている場合Cookieが表示されません。ローカルサーバやテストサーバを利用して確認しましょう。
※上記のIEはIE9での確認方法です。開発者ツールが無い場合はURLアドレスバーに呪文を入れてください。

IEではpathの指定に注意！

IEで、path=/hoge/hoge.html という指定をしようとするとCookieそのものがセットできず困っていました。
で、調べてみると、「Javascriptのdocument.cookieのpath」←にあるように、Cookieの利用出来る範囲をフォルダ単位でしか指定出来ないようです。

上記の記事は少し古くてIE6と7で、と書かれていますが、IE8〜9でも同様の現象が起きています。
おかげで大変な思いをしましたね！まったくもうまったくもうIEは！！

jQuery.Cookieなんてものもあります

Cookieを簡単に扱える、jQuery Cookieなんてのもあるようです。
触ってみた事は無いのですが、プラグイン化されてるので、便利そうではあります。
jQueryを使用している場合なんかはサクッと追加出来て良いかもしれません。
jQuery.Cookie

いまさら？な気もしますが、ずっと苦手意識が強くて避けがちになってたCookieについて、半ば強制的に勉強出来たのはよかったですね。
（サンプルのコードがほぼ参考記事ままだったりするけど…。色々手は加えてますが）
まだ少し理解が浅いですが、分かってくると便利だなーって思います。
しかし、IEは本当なんとかして欲しいですねぇ＠・ェ・＠

参考記事一覧）
・http://www9.plala.or.jp/oyoyon/html/script/cookie.html
・http://www.pori2.net/js/cookie/1.html
・http://phpjavascriptroom.com/?t=js&p=document_cookie
・http://d.hatena.ne.jp/monjudoh/20080724/1216871110
・http://www.tohoho-web.com/wwwcook.htm
・http://pucyan.blog77.fc2.com/blog-entry-93.html
・http://www.synck.com/contents/technote/technote_1230518860.html