JavaScript でクッキーにデータを保存して利用する

  参考となるライブラリと概要



関連する Microsoft 文書
Internet Explorer で、ドメインあたりの Cookie の数の制限が 20 から 50 に増加する


Javascript cookies - Javascript tutorial with example source code という非常にシンプル
なコードがあり、実際 「手書きブログ」 のツールで使用しましたがうまくいっています。

但し、IE 以外では日本語を保存する場合に少し注意が必要です

Pliginv2


上記の画像の保存パレットの部分のデータをクッキーに保存しています。
テキストと、カラーデータを一つについて16色保存して使用していますが、
特に問題は出ていません。IE6 までは Cookies ディレクトリ内にある
クッキーを直接編集できるので、パレット一つぶんを取り出してみました。

以下のようなパレットがあと15個登録されています

  
pal_text2
普段の色
pipa.jp/
1600
3064488832
30123058
1042727632
30049633
*
pal_value2
ffffff,000000,c0c0c0,ff3b21,ffbd16,f5f30f,cc9968,606060,fa80f9,8e0000,ffcc99,877d30,008f47,b7f4ff,c02e97,3f037e
pipa.jp/
1600
3064488832
30123058
1043037632
30049633
*
  



  オブジェクトとして使うより単純な関数として使用



見たところ、new してインスタンスを作成する意味の無いコードなので、
単純な function に変更して使用しました。あまり詳細を知る必要も無い
ので、このまま使えばいいと思いますが、ライセンスの縛りとして、どこかに
http://www.webtoolkit.info/
という URL を表示してサイトに戻って来れるようにする必要があります
( つまり、ここに関しては要件を満たしています )

  
// *****************************
//
// Javascript cookies
// http://www.webtoolkit.info/
//
// *****************************

function setCookie(name, value, seconds) {
 
	if (typeof(seconds) != 'undefined') {
		var date = new Date();
		date.setTime(date.getTime() + (seconds*1000));
		var expires = "; expires=" + date.toGMTString();
	}
	else {
		var expires = "";
	}
 
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function getCookie(name) {
 
	name = name + "=";
	var carray = document.cookie.split(';');
 
	for(var i=0;i < carray.length;i++) {
		var c = carray[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
	}
 
	return null;
}
 
function deleteCookie(name) {
	setCookie(name, "", -1);
}
  

削除は、過去の時間を設定してクッキーを期限切れにしています



  日本語を保存する場合の注意事項

IE の場合は SHIFT_JIS の漢字であればそのまま保存できました。
しかし、それ以外のキャラクタセットは試していませんが、うまく行かない
可能性もあります。なにより、他のブラウザ( 少なくとも Firefox ) では
化けてしまったので、encodeURIComponent と decodeURIComponentを使用して対応します。
以下は、手書きブログ用のアプリで使ったコードです。

  
var x = getCookie("p_position_x");
var y = getCookie("p_position_y");
if ( x != null ) {
	parent.document.getElementById("ti").style.left=x;
	parent.document.getElementById("ti").style.top=y;
}


function saveData() {

	var target,i,obj;

	if (userAgent.indexOf("firefox") > -1) {
		target = document.getElementById("target");
		for( i = 0; i < 16; i++ ) {
			obj = target.getElementsByTagName("OPTION")[i];
			setCookie(
				"pal_text"+(i+1),
				encodeURIComponent(obj.text),31536000
			);
			setCookie(
				"pal_value"+(i+1),
				obj.value,31536000
			);
		}
	}
	else {
		target = document.getElementById("target");
		if ( target.options.length != 0 ) {
			for( i = 0; i < 17; i++ ) {
				setCookie(
					"pal_text"+(i+1),
					target.options[i].text,31536000
				);
				setCookie(
					"pal_value"+(i+1),
					target.options[i].value,31536000
				);
			}
		}
	}

}


function loadData() {

	var target,i,work;

	if (userAgent.indexOf("firefox") > -1) {
		target = document.getElementById("target");
		for( i = 0; i < 16; i++ ) {
			work = document.createElement("OPTION")
			target.appendChild( work )
			work.appendChild(
				document.createTextNode(
					decodeURIComponent(
						getCookie("pal_text"+(i+1))
					)
				) 
			);
			work.value = getCookie("pal_value"+(i+1));
		}
	}
	else {
		target = document.getElementById("target");
		for( i = 0; i < 17; i++ ) {
			work = document.createElement("OPTION")
			target.options.add( work )
			target.options[i].text = getCookie("pal_text"+(i+1));
			target.options[i].value = getCookie("pal_value"+(i+1));
		}

	}

}
  

31536000 = 3600 x 24 x 365 で、通常の一年としています



  補足 : Firefox での個別クッキーのメンテナンス

IE ではできませんが、Firefox ではクッキー1つ1つを手動で削除する事ができます

Ffox_cookie












  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ