javascriptでクッキーの読み書き

4月 12

javascriptで、ブラウザにクッキーを保存、取得する方法。
まず、クッキーを保存する方法。

var cName = "test";
var cData = "hoge";
var cDay = "30";
	if(!navigator.cookieEnabled){    // クッキーが利用可能かどうか
		return;
	}
	var sday = new Date();
	sday.setTime(sday.getTime() + (cDay * 1000 * 60 * 60 * 24));
	s2day = sday.toGMTString();
	document.cookie = cName + "=" + escape(cData) + ";expires=" + s2day;

こんな感じ。
この場合、「test=hoge」が、30日間保存される。
これを、ある程度汎用的な関数にすると、

function cookieWrite(cName , cData , cDay){
	if(!navigator.cookieEnabled){    // クッキーが利用可能かどうか
		return;
	}
	var sday = new Date();
	sday.setTime(sday.getTime() + (cDay * 1000 * 60 * 60 * 24));
	s2day = sday.toGMTString();
	document.cookie = cName + "=" + escape(cData) + ";expires=" + s2day;
}

こんな感じになる。
呼び出し方は、

cookieWrite("sample","abc",10)

こんな感じ。この場合、「sample=abc」が、10日間保存される。
次は呼び出し方。

var cookie_memory = "";
var read_cookie = document.cookie;
 var read_cookie_split = read_cookie.split("; ");
 for(var i=0; i<read_cookie_split.length; i++){
 var read_cookie_split2 = read_cookie_split[i].split("=");    
 if (read_cookie_split2[0] == "test"){
 var cookie_memory = read_cookie_split2[1];
 }
 }

まずは、オレンジ文字の「var cookie_memory」で、最終的に必要なクッキーのデータを格納する変数を定義しておく。

次に、青文字の「var read_cookie = document.cookie;」で、ブラウザに保存されているクッキーを全部取得する。

次に、赤文字の「var read_cookie_split = read_cookie.split(“; “);」で、配列にする。クッキーは、「test=hoge; sample=abc」こんな感じで、複数の場合は「; 」で切っている。read_cookie_split[0]は、「test=hoge」。read_cookie_split[1]は、「sample=abc」が格納されている。

次に、緑文字のfor文。一つ前の段階で、「; 」で切ったデータを、さらに「=」で切る。そのデータが、var read_cookie_split2に配列として入る。この時点で、例えばクッキーが「test=hoge」の時は、read_cookie_split2[0]は、「test」、read_cookie_split2[1は、「hoge」が格納されている。

後は、if文で、必要なデータの時は、変数cookie_memoryに格納してしまえば良し。それ以外の、必要じゃないデータの時はスルーさせれば良し。

もう少しブラッシュアップ出来るかもしれないけど、とりあえずこんな感じでいけました。

後、ブラウザで記録されているクッキーを表示させるには、URL欄に

javascript:document.cookie;

と打てばよし。

今回のコードを作るのに、以下のページを参照させて頂きました。詳しい説明も載っています。

javascript

memo-memo