> JavaScript/jQuery > jQueryでクッキーを操作するjs.cookie.js(jquery.cookie.js)の使い方まとめ
jQueryでクッキーを操作するjs.cookie.js(jquery.cookie.js)の使い方まとめ

jQueryでクッキーを操作するjs.cookie.js(jquery.cookie.js)の使い方まとめ

js.cookie.jsは、jquery.cookie.jsから発展したプロジェクトです。
jquery.cookie.jsとは操作方法が違うので、忘れないように簡単にまとめておこうと思います。

js.cookie.jsとjquery.cookie.jsの違い

js.cookie.jsは、jquery.cookie.jsから発展したプロジェクトです。
jquery.cookie.jsでできることは、js.cookie.jsでもできると考えて良いようです。

一番の違いは、js.cookie.jsを利用すると、クッキーに配列を利用できるということでしょう。
jquery.cookie.jsだと、cookieというクッキーに{value}という値しか登録できなかったのが、{name : value}という値を登録できるようになったようです。

その他、クッキーの保存・削除・取得方法が違うので、利用の際は気をつけなければなりません。
(jquery.cookie.jsと同じ書き方では、js.cookie.jsでクッキーの保存・削除・取得はできません。)

ダウンロード方法

それぞれ、右下のDownloadアイコンからダウンロードできます。

利用方法

下記のように、外部scとして読み込んでから利用してください。
jquery.jsを呼んだ後に読み込んでください。
js.cookie.jsやjquery.cookie.jsの機能を利用するjavascriptなどは、js.cookie.jsまたはjquery.cookie.jsを読み込んだ後に読み込むようにしてください。

js.cookie.jsの場合

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

js.cookie.jsを参照できるようにパスを編集して利用してください。

jquery.cookie.jsの場合

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

jquery.cookie.jsを参照できるようにパスを編集して利用してください。

cookieを保存する

jquery.cookie.jsでcookieを保存する

// nameというクッキーにvalueという値を保存する
$.cookie('name', 'value');
// nameというクッキーにhogeという変数を保存する
var hoge = 'value'
$.cookie('name', hoge);
// nameというクッキーにvalueという値を7日間保存する
$.cookie('name', 'value', { expires: 7 });
// nameというクッキーにwww.sample.comというドメイン内で全ての範囲で利用できる(パスに制限がない)valueという値を保存する
$.cookie('name', 'value', { expires: 7, path: '/', domain: 'www.sample.com' });

利用できるオプションは下記のとおりです。

expires 有効期限(日数)
path 有効なパス(ドメイン全体で利用したい場合は’/’を設定)
domain 有効なドメイン
secure HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

これらのオプションは、js.cookie.jsでも利用できます。

js.cookie.jsでcookieを保存する

// nameというクッキーにvalueという値を保存する
Cookies.set('name', 'value');
// nameというクッキーにhogeという変数を保存する
var hoge = 'value'
Cookies.set('name', hoge);
// nameというクッキーにvalueという値を7日間保存する
Cookies.set('name', 'value', { expires: 7 });
// nameというクッキーにwww.sample.comというドメイン内で全ての範囲で利用できる(パスに制限がない)valueという値を保存する
Cookies.set('name', 'value', { expires: 7, path: '', domain: 'www.sample.com' });
// nameというクッキーに{キー…foo,値…bar}という配列を保存する
Cookies.set('name', { foo: 'bar' });

利用できるオプションは下記のとおりです。
jquery.cookie.jsと違い、クッキーに配列を保存することができます。

expires 有効期限(日数)
path 有効なパス(ドメイン全体で利用したい場合は’/’を設定)
domain 有効なドメイン
secure HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

これらのオプションは、jquery.cookie.jsでも利用できます。

Cookieを削除する

jquery.cookie.jsでcookieを削除する

// nameというcookieを削除する
$.removeCookie('name');
// pathの指定されているnameというcookieを削除する
$.removeCookie('name', { path: '/' });

クッキーを削除する際、クッキー保存時にpathが指定されていた場合は、pathを指定しなければなりません。

js.cookie.jsでcookieを削除する

// nameというcookieを削除する
Cookies.remove('name');
// pathの指定されているnameというcookieを削除する
Cookies.remove('name', { path: '/' });
// secureが設定されているnameというcookieを削除する
Cookies.remove('name', { secure: true });

クッキーを削除する際、クッキー保存時にpathが指定されていた場合は、pathを指定しなければなりません。
また、クッキーを削除する際、クッキー保存時にsecureが指定されていた場合は、secureを指定しなければなりません。

Cookieを取得する

jquery.cookie.jsでcookieを取得する

// $.cookie('name', 'value');でvalueという値がnameというcookieに保存されてる場合
$.cookie('name'); // => "value"
$.cookie(); // => { "name": "value" }

js.cookie.jsでcookieを取得する

// Cookies.set('name', 'value');でvalueという値がnameというcookieに保存されてる場合
Cookies.get('name'); // => 'value'
Cookies.get(); // => { name: 'value' }

// Cookies.set('name', 'value', { domain: 'sample.com' });でsample.com内でvalueという値がnameというcookieに保存されてる場合
Cookies.get('name', { domain: 'sample.com' }); // => 'value'

// Cookies.set('name', { foo: 'bar' });で{ foo: bar }という値がnameというcookieに保存されてる場合
Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }

cookie登録時にドメインが指定されている場合、ドメインを指定しないとcookieは取得できません。
ただし、pathが指定されていた場合、pathを指定しなくてもcookieを取得することはできるようです。

参考にさせて頂いたサイト

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)