I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > 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を取得することはできるようです。

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

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

関連記事

【初心者向け】これだけわかっていればいいJavascriptとjQuery簡単な違いや使い方

【初心者向け】これだけわかっていればいいJavascriptとjQuery簡単な違いや使い方

jQuery(Ajax)でhtmlに別のhtmlで書かれた共有パーツをincludeする方法

jQuery(Ajax)でhtmlに別のhtmlで書かれた共有パーツをincludeする方法

Instagramの写真一覧をサイトに表示する方法

Instagramの写真一覧をサイトに表示する方法

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

Comment Form

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

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。