JavaScriptプラグイン「JavaScript Cookie」でお手軽にクッキーを操作する

5年ほど前に以下の記事を書きました。
jQueryプラグイン「jquery.cookie.js」でお手軽にクッキーを操作する
久しぶりに公式サイトをのぞいてみるとjQueryを使わない、JavaScriptのプラグインとして開発が移っていたようです。

改めて、便利な使い方を確認したいと思います。

導入方法

導入方法はとても簡単です。
上記サイトから「js.cookie.js」をダウンロードして読み込みます。

<script type="text/javascript" src="/js/js.cookie.js"></script>

cookieの操作だけが目的の場合に、jQueryを読み込まなくてもよいので容量が軽くて済みます。また、jQueryのバージョンなどベースライブラリの依存も考慮する必要もなくなりました。

例えば、クッキーの変数名「test1」に値をセットする場合には以下のようにします。

Cookies.set("test1", 100);

ブラウザをリロードした後に、実際にクッキーに保存されているか確認してみます。

alert(Cookies.get("test1"));

ダイアログに「100」と表示されたので、値は保持されているようです。
また、値をクリアする場合には以下のようにします。

Cookies.remove("test1");

以下のようにして、JSON形式でデータを保存、取得することができます。

Cookies.set('name', { test1: '100' });

取得には「getJSON」を使います。

Cookies.getJSON('test1');

{ test1: '100' }

保存の際、デフォルトでそのサイト全体で有効な値として保存されますが、以下のようにパスを追加することで有効範囲を指定できます。

Cookies.set("test1", 100, { path: '/about/' });

また、保存期限を指定することもできます。
デフォルトではセッションが切れた際に値がクリアされますが、例えば以下のようにして365日の期限を設定することができます。

Cookies.set("test1", 100, { path: '/about/', expires: 365 });

関数dateを利用することで、1日以下の秒単位で期限を設定することができます。
以下、単位はミリ秒なので「30*1000」で30秒の保持期限をセットしたことになります。

var date = new Date();
date.setTime(date.getTime() + (30*1000));
Cookies.set("test1", 100, { path: '/about/', expires: date });

公式サイトより、Internet Explorer 6以上、FirefoxやGoogle Chromeに加えてiPhoneやAndroidもカバーしているのは助かりますね。

updated : 2018.11.20 posted : 2016.03.07