Web Storageは、Cookie よりも簡単に、かつ、柔軟に、アプリケーションデータをクライアント側に保存する仕組みです。下記のふたつの仕組みがあります。
下記の仕様書が公開されています。
サポート状況は下記を参照してください。
サンプルがこちらです。localStorage["sample"] にデータを読み書きします。イベントを受信するとメッセージを表示します。ブラウザを再起動してもデータが保持されています。
複数のブラウザウィンドウを開いて確認してみてください。あるページでの変更が、他のウィンドウに通知されます。
<h1>Web Storage Sample</h1>
<hr>
<input type="text" id="text2" value="SAMPLE">
<button onclick="setLocalStorage()">Set Local Storage</button>
<hr>
<button onclick="showLocalStorage()">Show Local Storage</button>
<input type="text" id="text1">
<hr>
<pre id="message"></pre>
<hr>
<script>
// 他ウィンドウで値が変更されると通知する
window.addEventListener('load', () => {
window.addEventListener("storage", (e) => {
document.getElementById("message").innerHTML += `Changed data from ${e.oldValue} to ${e.newValue}.\n`;
});
});
// ローカルストレージに値を設定する
function setLocalStorage() {
const text2 = document.getElementById("text2");
localStorage["sample"] = text2.value;
document.getElementById("message").innerHTML += "Set data to local storage.<br>";
}
// ローカルストレージの値を読み出す
function showLocalStorage() {
const text1 = document.getElementById("text1");
text1.value = localStorage['sample'];
document.getElementById("message").innerHTML += "Get data from local storage.<br>";
}
</script>
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)」で識別されます。共用サーバで使用する際は、同じサーバを利用する人とデータが混在してしまうことがあります。
https://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;
オリジンで設定されている値の一覧を読み出します。
Object.keys(localStorage).forEach((key) => {
console.log(`${key} = ${localStorage[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 以外では、自分自身のタブで変更したものや、設定前後の値が同じ場合は通知されません。ブラウザを複数ウィンドウ起動して確かめてみてください。
window.addEventListener("storage", (e) => {
document.getElementById("message").innerHTML += `Changed data from ${e.oldValue} to ${e.newValue}`;
});
| プロパティ | 説明 |
|---|---|
| url | オリジンを示すURL。 |
| key | キー。 |
| oldValue | 変更前の値。 |
| newValue | 変更後の値。 |
| storageArea | localStorage/sessionStorageオブジェクト。 |