jquery.cookieでjsオブジェクトをJSONで保管するメモ

プログラミング

要望

1. フォームの入力情報をクッキーに保存したい。
2. 1つのクッキーに複数の項目の情報をまとめて保存したい。

解決策

jQueryプラグインの"jquery.cookie"を使うことで全て解決しました。

• 外部: carhartl/jquery-cookie (GitHub)
• 自作サンプル(Runnable.com)

解説

自動JSON化のオプションを有効にすれば、JavaScript側では連想配列として、クッキー側ではJSON形式の文字列として扱えるように自動で変換してくれます。

// 自動JSON化を有効に
$.cookie.json = true;

// 連想配列をJSONで保存
var hash1 = { ... }
$.cookie('cookie1', hash1);

// JSONを連想配列に復元
var hash2 = $.cookie('cookie1');
for (var key in hash2) {
    ...
}

これはv1.3.0で追加されたオプションのようですね。

参照: jquery-cookie/CHANGELOG.md at master · carhartl/jquery-cookie

ほんのちょっとの手間の違いですが、便利です。

両者の違いは下記の通り。

// 保存
$.cookie('cookie1', hash1); // v1.3.0以降
$.cookie('cookie1', JSON.stringify(hash1));  // v1.3.0未満

// 復元
var hash2 = $.cookie('cookie1'); // v1.3.0以降
var hash2 = JSON.parse($.cookie('cookie1'));  // v1.3.0未満

※ v1.3.0以降でも自動JSON化を有効にしなければ、記述方法はそれ以前と同じです。

注意点

Dateオブジェクト

クッキーにDateオブジェクトをそのまま保存しようとすると色々予期せぬ不具合が起こるようです。

Date.getTime()でミリ秒を表すNumberに変換しておくのが一番問題ない気がします

引用: JSON.stringify/parseは困ったもんだ。 - IT-Walker on hatena

クッキーの容量

1つのクッキーにつき4KBですから、それほど心配する必要はないと思いますが、長文を投稿できる入力欄の場合は注意しなければなりません。

参照: 最新ブラウザのクッキーの制限(数,サイズ)を調べてみた - ITコンサルタント成長録

IE7以前では『JSON.stringify』は使えない

(コメント欄で助言をいただきました m(_ _)m )

IE7以前では JSON.stringify などのJSONオブジェクトが使えませんが、"json2.js"を使えば解決するそうです。

外部: douglascrockford/JSON-js (GitHub)

<!--[if lt IE 8]>
<script src="json2.js"></script>
<![endif]-->

Permalink | コメント(4) | 11:41