読者です 読者をやめる 読者になる 読者になる

log

日記です

jQueryでcookieを楽ちんに使う

jQuery

クッキー初めて使うっす

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

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

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

やりたいこと
  • 前回選択していた項目を保持する

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

参考サイト

jQueryjquery.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/に置けばコピペで動きます。

デモ

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