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

投稿日：2015/11/06 ｜最終更新：2015/11/08
JavaScript/jQuery
js.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でクッキーの保存・削除・取得はできません。）

ダウンロード方法

jquery.cookie.jsのダウンロード：https://github.com/carhartl/jquery-cookie
js.cookie.jsのダウンロード：https://github.com/js-cookie/js-cookie

それぞれ、右下の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という値を７日間保存する
$.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という値を７日間保存する
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を取得することはできるようです。