Html5のWebStorageについてのメモ

その道の方、ご存知の方にはまったく役にたちません。

全然大したことは書いてません！

あくまで自分へのメモですです。

Cookieのすごい版。
ブラウザ閉じても情報を保持できる仕組み。

localStorageとsessionStorageの2種類があって、後者はセッションが生きてる間だけ有効。

Cookieとの違いは、リクエストとして送信するかしないか。
ローカルで完結するので、Cookieより安全な感じ。

「キー：バリュー」でデータ保存。

localStorage.setItem("neko", " nyan");
localStorage.setItem("inu", "wan");
localStorage.hiyoko = "piyopiyo";

取り出すときは、

localStorage.getItem("neko");  // "nyan"
localStorage.getItem("inu");  // "wan"
localStorage.hiyoko // "piyopiyo"

まぁ普通やね。

今のところ、文字列しか保存できないようです。
正確には、オブジェクトも保存できるけど、文字列としてしか取り出せないそうです。
JSON.stringify、JSON.parseってのを使えば、配列→文字列として保存、文字列→配列として取り出し、とかできるそうな。

データ消すとき

removeItem(”neko”);　//"neko"にはいったデータを削除
localStorage.clear();　//全部消去

意図的にデータを削除しない限り、一生データが残り続けるそうです。(sessionStorageは違うけど)
データの保存される場所はブラウザでまちまちなようですが、Cookieを削除すると消えることがあるらしいです。

データを使いまわせるスコープは、オリジン：プロトコル、ドメイン、ポートだそうな。
ということで、共有サーバーだったりするとデータがごちゃごちゃになる模様。
きっちり整理してデータ保存すれば大丈夫なような？
clear()はアウトやねー。

HTML5のlocalStorageでiPhone用Webアプリ高速化

みたいな使い方が一番良いんかな？

ちなみに、GoogleChromeのExtensionのオプション設定とかは、これで保存されてるみたいです。

Do It Later - Alligator ! - Chrome Web Store

↑仕事でよく使うシンプルなToDoリストを管理できるやつなんですけど、これは正にこの仕組でした。
ソース覗いてみるとわかりやすかったのでおすすめですです。

以上、メモでした。