[jQuery] jQueryを使ってCookieを簡単に扱う

先日cookieを使ってプルダウンを操作する必要があった時にjQueryを使えば手軽に扱えるとの便りをもとに試してみたらホントに楽だったので少しご紹介を。必要なのはjquery.cookieと呼ばれるライブラリでこれをHTMLに読み込ませてあとはマニュアルに従えば簡単に実装できます。ちなみに使い方とオプションはきれいにまとめてくれているこちらのブログを参考にしました。

jquery.cookieは「$.cookie()」と表記した引数に各オプションを設定すれば扱うことができます。

<select><option value="">-----</option></select>
<select><option value="バナナ">バナナ</option></select>
<select><option value="リンゴ">リンゴ</option></select>
<select><option value="パイナップル">パイナップル</option></select>

<input id="conf" type="button" value="確認する" />
<input id="delete" type="button" value="cookieを削除" />

HTMLは<select>タグと<input>タグでプルダウンとボタンを生成しています。各々のタグにidセレクタを適当に振っておきます。

$(function() {
	// プルダウンで選択された値をcookieに保存するための関数
	function keepCookie(v) {
		$.cookie("food", v, {path: '/demo/2013/0510/'});
	}

	// プルダウンで選択された項目をkeepCookie()に渡す
	$("#food").change( function(){
		keepCookie($(this).val());
	});

	// 選択された項目を選択状態にする
	var food = $.cookie("food");
	$("#food").val(food);

	// 選択された値を出力する
	if(food) {
		$("#result").show();
		$("#result li").text("選択したのは「" + food + "」ですね。");
	}

	$("#conf").click(function(){
		location.href="index.html"
	});

	$("#delete").click(function(){
		// cookieを削除
		$.cookie("food", "", {path:'/demo/2013/0510/', expires:-1});
		alert("Cookieを削除しました");
		location.href="index.html"
	});

});

jQueryは渡された値をcookieに保存するkeepCookie()とプルダウンで選択された値をkeepCookie()に渡す処理で実装しています。あとは保存した値を出力するなり選択された<option>タグにselected属性を足して選択状態にするのに活かしています。cookieの削除や削除する期間を指定したり特定のディレクトリを対象にしたい等もオプションを指定するだけなので手軽で便利です。

  • 2013.05.10
  • お仕事っぽいこと