jQueryでcookieを楽ちんに使う

クッキー初めて使うっす

Webプログラミングで、ページをまたいで値を保持する方法は二つ

Sessionを使う（サーバーサイドのお話)
Cookieを使う(クライアントサイドのお話、JavaScriptのみで操作おｋ）

セッションはよくログイン状態の保持とかで使われる。
ショッピングカートとかは…Cookieかな？Sessionかな？
もしくは、サーバーのDBにユーザーごとにカートの情報を保存しているかもしれない。
ま、いいや。

やりたいこと

前回選択していた項目を保持する

ここは…セッション使うような場所じゃないな…
クライアントサイドだけで済む話を、サーバーサイドまで持ってきてSessionを使うなんて無駄なことだ。
ここはクッキーだな、と思いJavaScriptでクッキーを利用しようと思った。
jQueryのプラグインがあったらかなり楽ちんにできるんじゃね？と思いググってみると、やっぱりあった！
プラグイン使いまくりのかなりゆとりプログラマな気がしますが、ありがたく利用させていただきます。

参考サイト

jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる｜caraldo.net | WebとiPhoneとロードバイクが大好き！
http://blog.caraldo.net/2009/03/jqcookiemenu.php

使い方

クッキーの保存

$.cookie("CookieName","保持する値");

クッキーの取り出し

val = $.cookie("CookieName");

コード

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Hello Cookie</title>
 <!-- jQuery本体と、cookieプラグインを読み込ませる -->
 <script src="../scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="../scripts/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function() {
  //現在のCookieの値を出力
  $("#result").html($.cookie("cookie"));
 });
 function setCookie(){
  //入力された値をCookieに保持する
  $.cookie("cookie", $("#cookieValue").val());
 
  //Cookieの値を出力
  var val = "クッキーを「" + $("#cookieValue").val() + "」にセットしました．";
  $("#info").html(val);
  $("#result").html($.cookie("cookie"));
 }
 </script>
</head>
 <body>
  <input id="cookieValue" type="input" />
  <button onclick="setCookie()">クッキーをセットする。</button>
  
  <p>現在のクッキーは<span id="result"></span>です.</p>
  <div id="info"></div>
 </body>
</html>

ページをリロードしても、値が保持されていることが確認できると思います。
下記のファイルを./scripts/に置けばコピペで動きます。

jquery-1.4.2.min.js
jquery.cookie.js

デモ

下記のURLにて、上記のコードの動作を確認できます。
http://takuan.me/sample/jQueryCookie.html

ぶろぐ

日記です