Web Storageを試す

ブラウザにデータを保存する仕組のWeb Storage。html5+JavaScriptでWebアプリをつくっているのですがデータを保存する必要がありこれが使えないか試してみました。

Local StorageとSession Storage

Web Storageは2タイプある。
Local Storageはデータを永続的に保存する仕組。ブラウザを閉じてもデータは保持される。

もう一方のSession Storageはデータを一時的に保存する仕組。ウインドウを閉じるとデータは破棄される。

何れもKey,Value型でテキストのみ保存可能。

スコープ

Local Storageはドメイン+ポート番号（オリジンっていうみたい）毎にStorageが用意される。example.com/01.htmlで設定したLocal Storageはexample.com/hoge/02.htmlでも参照できるし値の上書きも可能。ファイルやディレクトリ毎に独立しているわけではないので注意が必要。

Session Storageはウインドウ毎に独立したStorageが用意される。ウインドウAとウインドウBで同じページに接続しても、ウインドウAで設定したSession StorageはウインドウBから参照することはできない。

実装

//保存
localStorage.setItem(key, value);
//参照
localStorage.getItem(key);
//削除
localStorage.removeItem(key);
//全削除
localStorage.clear();

sessionStorageの場合は、localの部分をsessionに書き換えるだけ。

オブジェクトはそのままでは保存できないのでJSONにして保存。

//保存
value = JSON.stringify(value);
localStorage.setItem(key, value);
//参照
value = localStorage.getItem(key);
value = JSON.parse(value);

Web Storage デモ

デバッグ方法

ChomeやSafariのインスペクタやFirebugでWeb Storageに保存したデータを確認することができます。

まとめ

恐ろしく簡単でびっくりしました。文字列しか保存できないのが残念ですが、JSONでなんとかなりそうです。
珍しいことにIE8でも動くようなので、意外と出番は早いかもしれません。

参考になったサイト
http://www.html5.jp/trans/w3c_webstorage.html
http://ascii.jp/elem/000/000/557/557064/