Web Storage
Web StorageはCookieよりも大容量でWebブラウザにデータを残せる技術です。HTML5から追加されました。Cookieが1つあたり最大4KBだったのに対し、Web Storageは1オリジンあたり5MBまで保存できます。1オリジンとはURLのスキーマ、ドメイン、ポート番号がユニークなものを指します。例えば以下はすべて別オリジンです。
- http://example.com/
- https://example.com/
- http://www.example.com/
- http://sub.example.com/
- http://example.com:8080/
また、Web StorageはsessionStorageとlocalStorageに分かれます。sessionStorageは1セッション、つまりウィンドウやタブを閉じるまで有効なWeb Storageで、他のタブやウィンドウと共有はできません。localStorageは1オリジンあたり共通で、別ウィンドウやタブと共有して利用できるデータになります。
使い方
sessionStorageまたはlocalStorageで呼び出します。
// または
var strage = localStorage;
メソッドは多くなく、6つだけです。
- getItem(key) : keyを指定して値を取得
- setItem(key, value) : keyにvalueを入れる
- removeItem(key) : keyを指定してデータ削除
- clear() : 全データ削除
- key
: i番目のキーを取得 - length : データの数を取得
アイテムをセット
アイテムを取得
"World"
アイテム数を取得
1
キーを取得
"Hello"
すべてのキーと値を取り出す
forループを使ってすべてのキーと値を取り出します。
console.log(strage.getItem(strage.key(i)));
}
扱い
Web StorageはKVS（キーバリューストア）になります。キーと値の2つでデータ管理を行うシンプルなデータストアになっています。
注意点
Web Storageに入ったデータは文字列として扱われます。例えば関数も入れられますが、取得時には文字列になっています。
> strage.getItem("Tiger")
"function (){console.log("Hello World")}"
使いどころ
データがサーバに飛ばないということもあって、ローカルの一時データ保管場所として使われるケースが多いようです。データ量も5MBまでになりますので、あまり大容量（動画など）は無理ですが画像であればBase64デコードすれば保存できるでしょう。
フォーム入力時の保存に使ったり、ショッピングカートの一時的な保存場所に使うこともできます。Webアプリケーションはタブを閉じるとすべてデータが消えてしまう可能性があるため、そうしたヒューマンエラー回避策として使ってみるのはいかがでしょう。
補足（hifiveの場合）
hifiveでは型を保持したまま保存、取得ができます。ただしシリアライズできるオブジェクトに限ります（例えば関数型は保存できません）。
var item = h5.api.storage.local.getItem('key3'); // Array型のオブジェクトを取得できる
console.log(item)
console.log(item[1]); // AAA
詳しくは11.HTML5APIの利用をご覧ください。