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

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

Posted at March 4,2013 12:03 AM
Tag:[Cookie, jQuery, Plugin]

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

jQuery Cookie

1.機能

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

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

2.プラグインのダウンロード

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

jquery-cookie

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

3.基本的な使い方

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」となります。

4.期限・パス・ドメインを設定する

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

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

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

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

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

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

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

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

5.SSLの場合のみcookieを通信する

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

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

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

6.cookieをまとめて取得する

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

var cookies = $.cookie();

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

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

7.cookieを削除する

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

$.removeCookie('キー');

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

$.removeCookie('キー', { path: '/' });
関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)