Web Storage API

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

API

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();
};

<html> <dt>length</dt>

<dd>格納されている要素数を取得する</dd>

<dt>key(index) </dt>

<dd>指定した番号のインデックスにあるキーの値を取得する</dd>

<dt>getItem(key) </dt>

<dd>指定キーの値を取得</dd>

<dt>setItem(key, data)</dt>

<dd>keyにdataをアサインする</dd>

<dt>removeItem(key)</dt>

<dd>指定キーの値を取り除く</dd>

<dt>clear()</dt>

<dd>ストレージの全データを消去する</dd>

</html>

使い方

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

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

// セッションストレージ
var ss = window.sessionStorage;
ss.setItem("hoge", "ほげ");
window.alert(ss.getItem("hoge"));
 
// ローカルストレージ
var ls = window.localStorage || window.globalStorage[location.hostname];
ls.setItem("hoge", "ほげ");
window.alert(ls.getItem("hoge"));

現在のFirefox 3ではglobalStorageという名前でローカルストレージが実装されていたが、HTML5の仕様では localStorage というインターフェースである。Firefox 3.5からHTML5仕様に沿ったものに変更されたようだ。

最新のブラウザが続々と対応中、2009/03/24時点でFirefox3、Safari4、IE8が対応している。

値の保存と取得には、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);
}

Cat Paw Software

目次

Web Storage API

API

使い方