cookieの保存

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

実例

（ボタンを押すとcookieが保存され、同じ内容をここに表示します）

例文

function save_cookie() {
	var c_data,c_name,c_date,c_limit,n;
	//保存データの準備
	c_data = escape("TEST用データ"); //*1
	//cookie名
	c_name = "sample_cookie="; //*2 
	//有効期限
	c_date = new Date(); 
	n = c_date.getTime() + 1000*60*60*24*365; //*3 
	c_date.setTime(n); 
	c_limit = c_date.toGMTString();

	//cookieの書き出し
	document.cookie = c_name + c_data + "; expires=" + c_limit; //*4
}

解説

保存の実例は、ボタンやダイアログは処理の開始と終了を判りやすくするためのものです。

cookieを有効に保存するためには必ず有効期限を設定する必要があります。
また、複数のcookieが保存される場合もあるため、読込時に見分けるための名前を事前に決めておきます。

*1：実際にはフォームや計算によって取得します。日本語を含まない場合、escape()を省略してもかまいません。
複数のデータを繋げて保存しても構いませんが、読込後に正しく切り分けねばなりません。例えば、「50,75,100」のように「,」でデータを区切り１つにします。

*2：保存と読込で共有するcookie名です。名前の最後に「=」を付けておきます。

*3：有効期限を1年に設定するため、ミリ秒に換算して現在の時刻に加算しています。

複数のcookieを保存する場合は、必ず名前を変更して上書きしないように注意が必要です。

応用 - 複数の項目をまとめて保存

一つのcookieの中に複数の項目からまとめてデータを入れておきたい場合があります。
例えば、フォームの入力データの場合、各項目毎にcookieを用意しているとcookieの上限数が問題となります。全体では300個を記録できますが、１つのサイトでは20個という制限があります。つまり、全体の制限では古いcookieが消えて行き、サイトの制限では新しいcookieが記録されないことになります。ただし、サイトの制限についてはブラウザによって上限を引き上げていることがあります。

そこで、cookieを節約するため、複数の項目からデータを一つにまとめます。
このとき、データとデータの間が分かるように仕切りの文字（記号）を入れます。「;」はcookieの仕切りに使われているため、使用しないようにします。データの中で使わない文字が良いので、ここでは「|」（記号の縦棒）を使っています。

function save_cookie() {
	var c_data,c_name,c_date,c_limit,n;
	//保存データの準備
	c_data = "";
	sp = "|"; //データの仕切り
	for (n=0;n<10;n++) {
		//dataA
		c_data += document.getElementById("dataA" + n).value + sp;
		//dataB
		c_data += document.getElementById("dataB" + n).value + sp;
	}
	c_data = escape(c_data);
	//cookie名
	c_name = "sample_cookie=";
	//有効期限
	c_date = new Date(); 
	n = c_date.getTime() + 1000*60*60*24*365;
	c_date.setTime(n); 
	c_limit = c_date.toGMTString();

	//cookieの書き出し
	document.cookie = c_name + c_data + "; expires=" + c_limit;
}

赤字の部分が追加、変更箇所です。
フォームの中に<input>タグを使って、ID名が「dataA0」から「dataA9」までの10項目と、「dataB0」から「dataB9」までの10項目、合計20個の項目がある想定です。フォーム部分を下に例示してみます。

<input type="text" id="dataA0"> <input type="text" id="dataA1"> ... <input type="text" id="dataA9">
<input type="text" id="dataB0"> <input type="text" id="dataB1"> ... <input type="text" id="dataB9">

変数c_dataを空で用意したら、後は順番にデータを取り出して、仕切り文字を挟みながら変数c_dataに加えていきます。
もちろん、for文を使わずに１つ１つの項目や変数を足していく形でも構いません。

	//保存データの準備
	c_data = document.getElementById("dataA0").value + "|" + document.getElementById("dataA1").value;
	c_data = escape(c_data);

上記では、フォームからデータを直接変数に入れています。

	//フォームのデータが変数に入っている
	dataA0 = document.getElementById("dataA0").value;
	dataA1 = document.getElementById("dataA1").value;
	dataA2 = document.getElementById("dataA2").value;
	dataA3 = document.getElementById("dataA3").value;

	//保存データの準備
	sp = "|";
	c_data = dataA0 + sp + dataA1 + sp + dataA2 + sp + dataA3 + sp;
	c_data = escape(c_data);

上記の方法は、フォームの内容が先に変数に入っている場合を表現しています。
保存より以前の段階で、既に入力項目を変数で扱っている場合には、その変数を使うだけですので分かりやすいかも知れません。

データをどのようにまとめたとしても、これはcookieからデータを取り出すための準備に過ぎません。
データの読み込み時には、データの順番、仕切り文字、escape()などエンコードや暗号化の内容、またその手順を意識して復元する必要があります。

戻る