DOM ストレージと jQuery.cookie :: どっちも便利！

相変わらずの今更感ですが localStorage と jQuery.cookie をお仕事で使ってみました。

正直、localStrage だけでやりたかったのですが、IE 6〜 に対応する必要があったので cookie も併用することにしました。
じゃあ、cookie だけでやればいいかな、と思ったら chrome は local で cookie を使わせてくれない。
加えて www に接続しない環境でも使う必要があるという謎仕様の作業のために、いろいろ苦労しました。

あちらを立てれば、こちらが立たずという状態ではあったのですが、まあなんとか。

DOM ストレージ

DOM Storage - DOM | MDN
DOM ストレージの概要

対応ブラウザ

• IE 8-
• Firefox 3.5-
• chrome 4/5-
• opera 10.50-
• safari 4-

ざっくり説明

• localStorage
  • clear されるまでブラウザに保存されるデータ（key / value のペア）
• sessionStorage
  • タブが閉じられるまで保存されるデータ（key / value のペア）

ざっくり使い方

メソッド名	説明
setItem	key / value のペアをセットする
getItem	value を取得する
removeItem	key / value のペアを削除する
clear	DOM ストレージを破棄する

// データを保存
sessionStorage.setItem("name", "kwsktr");

// データにアクセス
console.log( "name: " + sessionStorage.getItem("name"));
> name: kwsktr

// データを削除
sessionStorage.removeItem("name");

// データをクリア
sessionStorage.clear;

jQuery.cookie

carhartl/jquery-cookie · GitHub

ざっくり説明 / 使い方

cookie です！

// cookie をセット
$.cookie('name', 'kwsktr');

// cookie を取得
console.log($.cookie('name'));

// cookie の option
$.cookie('name', 'kwkstr', { expires: 7, path: '/', domain: 'example.com', secure: true });

// cookie の削除
$.removeCookie('name');

どちらも便利ですが、くれぐれもセキュリティ関係にはご注意を。