Web Storageは、Cookie よりも簡単に、かつ、柔軟に、アプリケーションデータをクライアント側に保存する仕組みです。下記の仕様書が公開されています。
下記のブラウザでサポートされています。
サンプルがこちらです。localStorage["sample"] にデータを読み書きします。イベントを受信するとメッセージを表示します。ブラウザを再起動してもデータが保持されています。
IE 以外でのイベント受信動作は、複数のブラウザを開いて確認してください。あるページでの変更が、他のタブやウィンドウに通知されます。
Web Storage は通常、JavaScript からアクセスします。key に対して value を設定する、key-value 方式のストレージです。
localStorage["sample"] = "Sample Data"; var str = localStorage["sample"];
Web Storage には、ローカルストレージとセッションストレージがあります。
| 種別 | 説明 |
|---|---|
| ローカルストレージ | ブラウザを終了してもデータは保持される。同じオリジン内であれば、複数のタブやウィンドウ間でデータの共有が可能。 |
| セッションストレージ | ブラウザを終了するとデータは破棄される。複数のタブやウィンドウ間ではデータは共有されない。 |
Web Storage は、オリジン(origin)単位で保存されます。オリジンは、「プロトコル(例:http)＋ドメイン(例:www.tohoho-web.com)＋ポート番号(例:80)」で識別されます。共用サーバで使用する際は、同じサーバを利用する人とデータが混在してしまうことがあります。
http://www.tohoho-web.com:80/html5/web_storage_sample.htm
Cookie に比べて下記のような利点があります。
localStorage オブジェクト、または sessionStorage オブジェクトを用います。それぞれ、下記のメソッドをサポートしています。
| メソッド | 説明 |
|---|---|
| setItem(key, value) | key に値を設定します。 |
| getItem(key) | key の値を参照します。 |
| key(n) | n番目のキーを取得します。 |
| removeItem(key) | key の値を削除します。 |
| clear() | 値をすべて削除します。 |
ローカルストレージがサポートされているかを調べます。
if (!window.localStorage) {
return; // サポートされていない
}
ローカルストレージに値を設定します。下記の3行は同じ意味になります。
localStorage.setItem("sample", "Sample Data");
localStorage["sample"] = "Sample Data";
localStorage.sample = "Sample Data";
ローカルストレージから値を読み出します。下記の3行は同じ意味になります。
data = localStorage.getItem("sample");
data = localStorage["sample"];
data = localStorage.sample;
オリジンで設定されている値の一覧を読み出します。
for (i = 0; i < localStorage.length; i++) {
key = localStorage.key(i);
data = localStorage.getItem(key);
}
指定した値を削除します。
localStorage.removeItem("sample");
そのオリジンで設定されている値をすべて削除します。
localStorage.clear();
仕様上は複雑なデータ構造も設定・参照できるはずですが、大半のブラウザではうまく動作しないようです。文字列以外を保存する場合はJSONを用いるとよいようです。
var data = [ "data1", "data2" ]; localStorage["sample"] = JSON.stringify(data); data = JSON.parse(localStorage["sample"]);
値が変更されると storage イベントが発行されます。IE8, Firefox 3.6, Chrome 8, Opera 11, Safari 5 でサポートされています。IE 以外では、自分自身のタブで変更したものや、設定前後の値が同じ場合は通知されません。IE 以外ではブラウザを複数起動して確かめてみてください。
window.addEventListener("storage", function(e) {
alert(e.url + " [" + e.key + "]: Change from " + e.oldValue + " to " + e.newValue);
});
| プロパティ | 説明 |
|---|---|
| url | オリジンを示すURL。 |
| key | キー。 |
| oldValue | 変更前の値。 |
| newValue | 変更後の値。 |
| storageArea | localStorage/sessionStorageオブジェクト。 |