LocalStorageがおもいのほか便利すぎたのでまとめ

localStorageを使って見た．食わず嫌いでした．すごく便利ですね

cookieで保存するより相当便利です．

cookie VS localstorage 比較

Cookieの特長

ドメイン毎にデータが保存される．(SameOriginの原則)
Stringが保存される．
HTTPリクエストで毎回サーバーに送られる
JavaScriptからアクセス可能
有効期限がある

LocalStorageの特長

ドメイン毎にデータが保存される．(SameOriginの原則)
Stringが保存される．
HTTPリクエストで毎回サーバーに送られない
JavaScriptからアクセス可能
有効期限が特にない

比較まとめ

Cookieの特質から、HTTP通信で送る特性を省いたもの

HTTP通信で送る必要がないので，Expires（期限）も省略される

localStorageの保存方法

js> localStoage.fooo ="baaaaa"

これだけ。超便利

Cookieの場合

js> document.cookie = "fooo=var; path=/; expires=Tue, 31-Dec-2030 23:59:59;"

有効期限とかイロイロめんどくさい
有効期限なしだとセッションcookieになっちゃう．

localStorage でセッションcookieの代わりをする

 sessionStorage を使う

localstoreage は永続ストレージ sessionStorageはセッション（ブラウザとじるまで）

まとめ

	種類：ワンタイム	永続
cookie	セッション(期限無し)	通常Cookie(期限付)
Storage	sessionStorage	localstorage

保存できるモノ。

文字列．

Cookieとの違い．エスケープ処理が楽だとおも

sessionStorage/localStorage の使い方は共通Storageインターフェース．

保存

localStorage.foo ="bar"
localStorage["foo"] = "bar"
localStorage.setItem("foo","bar")

取出し。取得

localStorage.foo           // #=> "bar"
localStorage["foo"]        // #>= "bar"
localStorage.getItem("foo")// #=> "bar"

削除/消去

localStorage.removeItem("foo");

ダメな例

localStorage.foo = "" #null/undefined/false

"" / null / undefined / false は消去にならない．空文字や、文字列false/null/undefined が保存される

全削除

ストレージを破棄する。

localStorage.clear()

更新は上書きで．

localStorage.foo ="bar2"
localStorage["foo"] = "bar2"
localStorage.setItem("foo","bar2")

トランザクション・冪等性・複数タブ

トランザクションはない．

同一ページが複数タブで開いていたら・・・当然上書きされる
RESTの冪等性を意識する必要がある。これはタブで開くなって事ではない．
ユーザーがタブで開くことを前提に，設計するべきですよね．（Cookieだって同じです）

その他の

使い方として便利になるかどうか・・・あまり使うことはないかも

キー列挙

for (i in localStorage){ ... }

キーの長さ

localStoage.length

インデックス値でアクセス

localStorage.key(0)

動作イメージ・RESTとの対比

POST http://exmample.com/hogehoge
GET  http://exmample.com/hogehoge

で保存・取得する代わりに

javascript:localStorage.hogehoge="bar"
javascript:localStorage.hogehoge

でアクセス可能だと思うと理解しやすい．もう保存だけのAPI作らなくて良いんですね．いちいち通信しなくて良いのが便利すぎます．

保存時に便利なもの*1

Array#join
Object#tosource
JSON#stringify*2

文字列でシリアル化をすると楽なのでこれらのメソッドが重宝する．取出すときはevalとかも便利．

逆に、あるが故に不便なの

Object#toString(); #=> "[object Object]"

文字列変換されて残念な結果に・・・

保存・取り出しはJSONを使うと楽

以上をふまえて、データを保存して取出すには。

//保存。
data = some_function();
localStorage["foo"]   = JSON.stringify(data);
//取り出し
data_string = localStorage["foo"]
data = JSON.parse(data_string);

オフラインアプリケーション？

オフラインアプリケーションには manifest が別途あるのでファイルとかはMafnifestに書くべきかな．Storaeにファイル書き込むのはチョッと・・・

localStorage/SessionStorageには容量制限があります。なのでファイルは書き込まないように！画像とか駄目だよ。ちゃんとManifest使おうね

参考

http://www.html5.jp/trans/w3c_webstorage.html#threads
http://jacoyutorius.wordpress.com/2011/01/02/html5のlocalstorageを使ってみた/
http://msdn.microsoft.com/ja-jp/library/cc197062(v=vs.85).aspx

*1:そもそもstroageにオブジェクト型が置けないのが原因、これも近々の解決させるため仕様策定中だそうです

*2:最近はサポートされている

それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ