Web Storageは、WebブラウザのJavaScriptでアクセスできるキーバリューストアのAPI仕様。データはクライアント側に保存される。現在IE8以降、Opera、Firefox、Safari、Chrome各ブラウザの最新版で使用可能。

localStorage、sessionStorageで使えるメソッド、プロパティ

interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any data);
  deleter void removeItem(in DOMString key);
  void clear();
};

• length: 格納されている要素数を取得
• key(index): 指定した番号のインデックスにあるキーの値を取得
• getItem(key): 指定キーの値を取得
• setItem(key, data): keyにdataをアサイン
• removeItem(key): 指定のキーの値を削除
• clear(): ストレージの全データを削除

キーと値のペアでデータを保存する。セッションストレージとローカルストレージの２種類のストレージがある。

• セッションストレージ：ウィンドウ（タブ）を閉じるまでデータが保存される。ウィンドウ毎にデータが独立している。
• ローカルストレージ：データはウィンドウを閉じても保存されている。複数ウィンドウでデータが共有される。

// セッションストレージ
const ss = window.sessionStorage;
ss.setItem("hoge", "ほげ");
window.alert(ss.getItem("hoge"));
 
// ローカルストレージ
const lbs = window.localStorage;
ls.setItem("hoge", "ほげ");
window.alert(ls.getItem("hoge"));

• セッションストレージのサンプル
• ローカルストレージのサンプル

値の保存と取得には、getItem、setItemメソッドを使用する他、通常のJavaScriptオブジェクトのようにキーをプロパティ名としたり、連想配列のようにアクセスできる。

sessionStorage.setItem("hoge", "fuga")
sessionStorage["hoge"] = "fuga";
sessionStorage.hoge = "fuga";
 
fuga = sessionStorage.getItem("hoge");
fuga = sessionStorage["hoge"];
fuga = sessionStorage.hoge;

ストレージのすべての値を取得する場合は、keyメソッドを使う。

for (int i = 0; i < storage.length; i++) {
  var key = storage.key(i);
  var value = storage.getItem(key);
}