ウェブストレージ

ウェブストレージ（Web Storage）とは

ウェブストレージ（Web Storage）は、Webアプリケーションがクライアント側でデータを保存するための仕組みです。以前はDOMストレージ（Document Object Model storage）とも呼ばれていましたが、現在ではウェブストレージが一般的な名称となっています。この技術は、HTTPクッキー（Cookie）と同様にデータを保存しますが、より大きな容量を扱うことができ、またクライアントサイドスクリプトからのみアクセス可能であるという点で異なります。

ウェブストレージの特徴

ウェブストレージは、従来のクッキーと比較して、いくつかの重要な点で優れています。

目的の違い: クッキーは主にサーバーとの通信に使用され、すべてのリクエストに自動的に含まれます。一方、ウェブストレージはクライアントサイドでのデータ保存に特化しており、HTTPリクエストヘッダーにデータが含まれることはありません。また、ウェブサーバーが直接ウェブストレージに書き込むことはできません。
ストレージ容量: クッキーの容量は4KBに制限されていますが、ウェブストレージはより大きな容量を利用できます。例えば、Mozilla Firefoxではオリジンごとに5MB、Google Chromeでは10MBの容量が提供されています。
アクセス: ウェブストレージにはクライアントサイドスクリプトからのみアクセスできます。これにより、サーバーへの不要なデータ送信を防ぎ、クライアント側で細かな制御が可能になります。

ローカルストレージとセッションストレージ

ウェブストレージには、ローカルストレージ（Local Storage）とセッションストレージ（Session Storage）の2種類があります。

ローカルストレージ:
同一生成元ポリシー（プロトコル、ホスト名、ポート番号の組み合わせ）に基づいてデータを保存します。
ブラウザを閉じてもデータが保持されます。
同一オリジンのすべてのスクリプトからアクセス可能です。
セッションストレージ:
ローカルストレージと同様にオリジンごとにデータを保存しますが、さらにインスタンスごと（ウィンドウごとまたはタブごと）にスコープが限定されます。
ブラウザのウィンドウまたはタブを閉じるとデータが削除されます。
同じWebアプリケーションの異なるインスタンス間でデータが干渉しないように設計されています。

インターフェースとデータモデル

ウェブストレージは、キーと値の両方が文字列である連想配列型のデータモデルを採用しています。これにより、クッキーよりも柔軟で使いやすいプログラミングインターフェースが提供されています。JavaScriptでは、`sessionStorage`と`localStorage`というグローバルオブジェクトを通じてこれらのAPIにアクセスできます。

javascript
// ローカルストレージへのデータの保存
localStorage.setItem('myKey', 'myValue');

// ローカルストレージからのデータの取得
const value = localStorage.getItem('myKey');

// セッションストレージへのデータの保存
sessionStorage.setItem('myKey', 'myValue');

// セッションストレージからのデータの取得
const value = sessionStorage.getItem('myKey');

データの保存

ウェブストレージのAPIでは文字列のみを保存できます。しかし、形式でデータを保存することで、JavaScriptのオブジェクトを効率的に扱うことができます。

javascript
// オブジェクトを文字列として保存
const myObject = {name: 'test', age: 30};
localStorage.setItem('myObject', .stringify(myObject));

// 文字列をパースしてオブジェクトとして取得
const storedObject = .parse(localStorage.getItem('myObject'));

名称について

W3Cの正式名称は「Web Storage」です。「DOM storage」という名称も使われていましたが、現在ではあまり使われなくなっています。W3Cによれば、「DOM」という用語は、Webアプリケーションのスクリプトで使用できるAPI群を指すために使用され、必ずしもDocumentオブジェクトが存在することを意味するわけではありません。

ウェブストレージの管理

ウェブストレージは、現在のすべてのブラウザでデフォルトで有効になっています。各ブラウザベンダーは、ユーザーがウェブストレージを有効/無効にする方法や、「キャッシュ」を消去する方法を提供しています。また、サードパーティのブラウザ拡張機能によっても、ウェブストレージを制御できます。

以下に、主要なブラウザでのウェブストレージの保存場所を示します。

Firefox: `webappsstore.sqlite` というSQLiteファイルに保存されます。
Google Chrome: ユーザープロファイルのSQLiteファイルに保存され、Windowsでは `\AppData\Local\Google\Chrome\User Data\Default\Local Storage`、macOSでは `~/Library/Application Support/Google/Chrome/Default/Local Storage` に保存されます。
Opera: バージョンによって `\AppData\Roaming\Opera\Opera\sessions\autosave.win` または `\AppData\Local\Opera\Opera\pstorage\` に保存されます。
Internet Explorer: `\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage` に保存されます。

関連技術

Indexed Database API (IndexedDB)

参考資料

HTML Living Standard 11 Web storage
HTML Standard — Web Storage（日本語訳） — 非公式な翻訳
W3C: Web Storage
Web Storage API on Mozilla Developer Network
Opera: Web Storage: easier, more powerful client-side data storage
Local Storage on BlackBerry DevZone

もう一度検索