refirio.org

基本的な使い方

jquery.cookie.js は

$.cookie(Cookie名, 値);

でCookieを設定することができ、設定した値は

$.cookie(Cookie名);

で参照することができます。また、3つ目の引数で

$.cookie(Cookie名, 値, {
  expires: 有効期限（日数）,
  path: パス,
  domain: ドメイン,
  secure: HTTPS接続の場合のみにCookieを送信
});

これらのオプションを利用することができます。具体的には

$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});

このように利用できます。

実際の利用例

まずはjQueryと jquery.cookie.js を読み込みます。

<script src="../jquery.js"></script>
<script src="jquery.cookie.js"></script>

サンプルでは「Cookieに保存」ボタンを押したときに名前とメッセージをCookieに記録しますが、

$('form').submit(function() {
  $.cookie('name', $('form input#name').val(), { expires: 30 });
  $.cookie('text', $('form input#text').val(), { expires: 30 });

  window.alert('Cookieに保存しました。');

  return false;
});

このような処理になっています。name というCookie名で名前欄の値を記録し、text というCookie名でメッセージ欄の値を記録しています。Cookieの有効期限はそれぞれ30日としています。（有効期限を指定しなければ、ブラウザを閉じたときにCookieが自動的に削除されます。）

設定したCookieを参照するのは

$('form input#name').val($.cookie('name'));
$('form input#text').val($.cookie('text'));

このような処理になっています。ページが読み込まれた時、Cookieに記録されている名前とメッセージの値を、名前欄とメッセージ欄に格納しています。

さらに「Cookieをクリア」ボタンを押したときにCookieを削除するようにしていますが、

$('form input#clear').click(function() {
  $.cookie('name', null);
  $.cookie('text', null);

  window.alert('Cookieを削除しました。');

  return false;
});

このような処理になっています。Cookieの値として null を指定し、有効期限も設定していません。これでCookieに記録した値が削除されます。