jQuery入門講座：クッキーの操作

クッキーの操作

サンプル紹介

クッキーの情報を簡単に取得/変更

「jquery.cookie.js」プラグインを利用するとクッキーへの情報記述や情報取得が簡単にできるようになります。クッキーを利用すれば、初めてサイトを訪れる人にサイトの説明を表示したり、サイト上の設定を記憶することができます。使い方次第でサイトのユーザビリティやアクセシビリティが向上するのではないでしょうか。

上の画像をクリックするとサンプルが開きます。このサンプルで「カウントアップ」のボタンをクリックし、表示されるクリック回数が変わるのを確認して下さい。その後ページを閉じて、再び開いてもクッキーの情報を取得してクリック数が表示されます。

組み込み

jquery-cookie著作権：MIT License: ダウンロードサイト：carhartl/jquery-cookie · GitHub
※リンク先に利用方法が記述されています。

htmlへの組み込みは以下の様に、jQuery同様scriptタグでリンクします。プラグインはjQueryのリンクより後に記述するようにしましょう。

<script type="text/javascript" src="jquery.cookie.js"></script>

構文

「jquery.cookie.js」プラグインを組み込むと、以下のcookieメソッドが追加されます。cookieメソッドはjQueryに直接利用します（jQueryは$に置き換えることが可能です）。第1引数しか設定しない場合はクッキー情報の取得、第2引数を設定することでクッキー情報の設定ができます。

クッキーの取得返値：クッキーの値: jQuery.cookie( クッキー名 )
※指定したクッキーがない場合はnullを返します。

クッキーの設定返値：なし: jQuery.cookie( クッキー名, 値 [,オプション])

・オプションはobjectオブジェクトで設定し、以下のプロパティが利用できます
　・expires：有効期限（日数）
　・path：クッキーのパス（もしドメイン全体で利用したいなら'/'を設定）
　・domain：クッキーを有効にしたいドメイン
　・secure：trueにすると「https」の時にだけ値を返すようになります。

解説

クッキー情報の取得

まずはクッキー情報を取得するサンプルを紹介します。サンプル（cookie/01.html）を開いてbody内にdiv要素しか無いことを確認して下さい。ここにクッキー情報を表示します。

jQueryは、まず以下の部分を確認して下さい。クッキーを利用する際は最初にクッキー情報を読み込みます。このサンプルではhtml要素の読込が完了したらreadFuncを実行するようにしています。

$(function(){
	readFunc();
});

readFuncは以下の様に記述され、2行目でcookieメソッドを利用して「testCounter」という名のクッキー情報を取得します。最初はクッキー情報が無いためnullが返ってきますが、その場合は変数myCounterに0を設定しています。dispCounterFuncはdiv要素に変数myCounterを表示するだけです。

function readFunc() {
	myCounter = $.cookie("testCounter");
	if (myCounter == null) myCounter = 0;
	dispCountFunc();
}

まだクッキーの情報がないので、結果としてdiv要素に「いままでのクリック回数は0回です。」と表示されます。

クッキー情報の設定

次はクッキー情報を設定するサンプルを紹介します。サンプル（cookie/02.html）を開いてbody内にid属性がcountのbutton要素が追加されたのを確認して下さい。

<div></div>
<button id="count">カウントアップ</button>

jQueryは以下の処理が追加され、id属性がcountのbutton要素をクリックすると、readFuncで読み取ったクッキー情報の値「myCounter」に1足します。そして3行目でcookieメソッドを利用して「testCounter（クッキー名）」の値として変数myCounterを設定します。最後に4行目でdispCountFuncを実行してmyCounterの値をdiv要素に表示します。

$("#count").click(function(){
	myCounter++;
	$.cookie("testCounter", myCounter);
	dispCountFunc();
})

このサンプルで「カウントアップ」ボタンをクリックして表示される数値（変数myCounter）の値を上げて下さい。値を上げたらページを閉じて再びサンプル（cookie/02.html）を開いて下さい。クッキー時クリックした情報が保存されているので、前回クリックしたのと同じ回数が表示されるはずです。

このように「jquery.cookie.js」プラグインを利用すると、簡単にクッキーの操作をすることができます。

クッキーの削除

クッキーを削除したい場合はnullを設定します。サンプル（cookie/03.html）を開いてbody内にid属性がresetのbutton要素が追加されたのを確認して下さい。

<div></div>
<button id="count">カウントアップ</button>
<button id="reset">クッキー消去</button>

jQueryは以下の処理が追加され、id属性がresetのbutton要素をクリックすると、cookieメソッドを利用して「testCounter（クッキー名）」の値にnullを設定して情報を削除します。

$("#reset").click(function(){
	$.cookie("testCounter",null);	
})

実際に「クッキーを削除」ボタンをクリックしてからページを閉じて下さい。そして再びサンプル（cookie/03.html）を開くとクッキーが削除されているためカウントが0に戻っています。

メモ

コンフィグ

jquery.cookieプラグインはクッキーの操作に関して、仕様（コンフィグ）を変更することができます。クッキーの情報は通常URIエンコードされて設定されますが、以下の様にrawプロパティにtrueを設定することで、エンコードせずに生データのまま設定することができます。私にはメリットがよく分かりません...。

rawデータの利用: $.cookie.raw = true;

また以下の様に、jsonプロパティをtrueにすると、クッキーにjsonデータが設定されている場合は自動的にパースされてます。これは複数のデータをまとめて保存する時に便利だと思うので、サンプルを紹介します。

jsonデータの自動パース: $.cookie.json = true;

サンプル（cookie/test01.html）を開いてbody内に2つのテキストフィールド（id属性はnameとage）とbuttonがあることを確認してください。jQueryでは、まず以下の部分を確認して下さい。まずhtml要素が読み込まれるとreadFuncを実行します。そしてbuttonをクリックするとwriteFuncを実行します。

$(function() {
	readFunc();
	$("button").click(function() {
		writeFunc();
	});
});

readFuncは以下の様に記述され、2行目で「jsonData」というクッキーの情報を取得しています。もしクッキーの情報が無い場合は3行目のif文によって後の処理を実行しないようにしています。

そしてポイントなのが4,5行目で取得したクッキー情報「myData」に対してプロパティを指定して値を取得している点です（myData.nameやmyData.ageの部分）。クッキーは文字列しか保存できないため、通常はこのように利用できません。

function readFunc(){
	var myData = $.cookie("jsonData");
	if(myData == null) return;
	$("#name").val(myData.name);
	$("#age").val(myData.age);
}

何故この様な処理が可能なのかというと、javaScriptの最初に部分に記述した以下の設定があるためです。jsonプロパティをtrueにする事で、jsonデータをクッキーに保存する時は文字に変換され、取得する場合は文字列をjsonデータに戻してくれるのです。

$.cookie.json = true;

writeFuncは以下の様に記述され、2行目でクッキーに保存するjsonデータ「myData」を作成し、3,4行目でnameプロパティとageプロパティの値としてテキストフィールドの値を設定しています。そして5行目でcookieメソッドを利用して値を保存しています。

function writeFunc(){
	var myData = new Object();
	myData.name = $("#name").val();						
	myData.age = $("#age").val();						
	$.cookie("jsonData", myData);
}

結果として、名前と年齢を記述して「クッキーに記憶」ボタンをクリックすると、ページを閉じてから再び開いてもクッキーの情報を利用して記憶した情報が設定されます。

しかしこの機能はjavaScriptのJSON.stringifyメソッドやJSON.parseを利用しているためIE6,7では利用できません。→参考：latest log様「String.toJSON(), JSON.stringify(), JSON.parse() の実装比較一覧」

次のページ：マウスホイール