小粋空間  -  a cheap joke and a play on words site

jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ

jQueryでcookieを簡単に使える「jQuery Cookie」の利用方法のまとめです。

１．機能

名前のとおり、「jQuery Cookie」はjQueryでcookieを簡単に使うためのjQueryプラグインです。

JavaScriptでは値のエンコード・デコードやpathやexpireの結合、取得時の操作など、cookie処理が結構面倒なのですが、このプラグインを利用すれば簡単に扱えるようになります。

２．プラグインのダウンロード

githubの「jquery-cookie」のページにある「ZIP」をクリック。

これでアーカイブをダウンロードできます。

３．基本的な使い方

jQueryと、ダウンロードしたアーカイブに含まれるjquery.cookie.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://user-domain/jquery.cookie.js"></script>

cookieに値を保存したい場合は次のように記述します。

$.cookie('キー', 値);

cookieから値を取得したい場合は次のように記述します。

var cookie = $.cookie('キー');

指定したキーに対応する値がない場合は「undefined」となります。

４．期限・パス・ドメインを設定する

例えば期限を7日にする場合は、第3パラメータにハッシュ形式で「expires」を設定します。

$.cookie('キー', 値, { expires: 7 });

パスを設定する場合は、第3パラメータにハッシュ形式で「path」を設定します。

$.cookie('キー', 値, { path: '/' });

ドメインを設定するには、第3パラメータにハッシュ形式で「domain」を設定します。

$.cookie('キー', 値, { domain: 'ドメイン' })

期限・パス・ドメインをまとめて指定するには次のように記述します。

$.cookie('キー', 値, { expires: 7, path: '/', domain: 'ドメイン' });

５．SSLの場合のみcookieを通信する

SSLの場合のみcookieで通信したい場合、４項の第3パラメータにハッシュ形式で「secure: true」を設定します。デフォルトはfalseです。

$.cookie('キー', 値, { secure: true });

４項の項目とあわせて設定する場合はカンマで区切ってください。

６．cookieをまとめて取得する

取得可能なすべてのcookieをまとめて取得するには、キーを指定せずに取得します。

var cookies = $.cookie();

値は次のようなハッシュ形式で返却されます。

{ 'キー1': 値1,
  'キー2': 値2 }

７．cookieを削除する

cookieを削除するには、removeCookieを利用します。

$.removeCookie('キー');

パスを指定する場合、次のように記述します。

$.removeCookie('キー', { path: '/' });