<< Seesaa : 単一記事ページのナビゲート文… | TOP | Shadowbox.js 3.0.3 の正統な使い方 >>

2010年11月17日


Google Libraries API を使った YUI によるクッキーの扱い

 
JavaScript からのクッキーのアクセスは、document.cookie にアクセスするだけ
なので、フォーマットの仕様さえ知っておれば誰にでも扱えます。当然世の中に
はいろいろライブラリがあるとは思いますが、今の世の中、Google + Yahoo で
.js をホスティングせずに扱えるのでこれが王道かもしれません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<title>Google Libraries API を使った YUI によるクッキーの扱い</title>
<style>
* {
	font-size:16px;
}
.act_button {
	width: 150px;
}
</style>

<script	type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script	type="text/javascript">
google.load("prototype", "1.6.1.0");
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
    require: ['cookie'],
    onSuccess: function() {}
}).insert();
</script>


</head>
<body>
<script type="text/javascript">
function writeCookie() {

	if ( $('fld1').value == '' ) {
		alert("keyを入力して下さい");
		$('fld1').focus();
	}

	// 現在のパスで参照可能なクッキー
	YAHOO.util.Cookie.set( $('fld1').value, $('fld2').value  );

	// 同一ドメインの全てのページで参照可能なクッキー
	YAHOO.util.Cookie.set( $('fld1').value, $('fld2').value+"_all", {path: "/" }  );

	// 有効期限を遠い未来にする
	YAHOO.util.Cookie.set( "save_data", "OK", {path: "/", expires: new Date(2025,0,12) }  );
}

function allCookie() {

		var allstr = "";
		var carray = document.cookie.split('; ');

		for(var i=0;i < carray.length;i++) {
			allstr += carray[i] + "\n";
		}

		alert(allstr);

}

function removeCookie() {

	// 現在のパスのクッキーの削除
	YAHOO.util.Cookie.remove($('remove_name1').value);

}

function removeCookie2() {

	// 指定したパスのクッキーを削除
	YAHOO.util.Cookie.remove($('remove_name2').value, {path: $('path').value });

}

</script>

<input class="act_button" type="button" value="書き込み" onclick='writeCookie();'>
key:<input type="text" id="fld1"> value:<input type="text" id="fld2" >
<br>
<input class="act_button" type="button" value="削除" onclick='removeCookie();'>

key:<input type="text" id="remove_name1">
<br>
<input class="act_button" type="button" value="パス指定削除" onclick='removeCookie2();'>

key:<input type="text" id="remove_name2"> &nbsp;path:<input type="text" id="path" >
<br>
<input class="act_button" type="button" value="全て表示" onclick='allCookie();'>

</body>
</html>
タグ：google
【Googleの最新記事】
posted by at 2010-11-17 12:17 | Google | このブログの読者になる | 更新情報をチェックする