Web Storage API は、クッキーを使用するよりも直感的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。
Web Storage の概念と使用方法
Web Storage には、以下の 2 種類の仕組みがあります:
sessionStorageは、ページのセッション中 (ページの再読み込みや復元を含む、ブラウザーを開いている間) に使用可能な、オリジンごとに区切られた保存領域を管理します。localStorageも同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
これらの仕組みは Window.sessionStorage および Window.localStorage プロパティ (正確には、サポートするブラウザーは Window オブジェクトが WindowLocalStorage および WindowSessionStorage オブジェクトを実装しており、これらに localStorage および sessionStorage プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると Storage オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。 同じオリジンに対して sessionStorage と localStorage は、別の Storage オブジェクトを使用します。 これらは別々に制御されて機能します。
注記: Firefox 45 より、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。 Web Storage の使用量が過大であることによって発生するメモリの問題を避けるために、制限を設定しました。
注記: ユーザーがサードパーティのクッキーを禁止している（英語）場合は、サードパーティの iframe から Web Storage にアクセスできません (Firefox 43 から、この動作を実装しています)。
注記: Web Storage は、mozStorage (SQLite 用の、Mozilla の XPCOM インターフェイス) や Session store API (拡張機能で使用するための、XPCOM ストレージユーティリティ) とは異なります。
Web Storage インターフェイス
Storage- 特定のドメインおよびストレージタイプ (session または local) に対して、データを保存、取り出し、削除できます。
Window- Web Storage API は
Windowオブジェクトを、Window.sessionStorageおよびWindow.localStorageという新たなプロパティで拡張します。 これらは、それぞれ現在のドメインの session および localStorageオブジェクトへのアクセス手段を提供します。 また、保存領域が変更される (例えば新たなアイテムを保存する) と発生する、Window.onstorageイベントハンドラもあります。 StorageEventstorageイベントは、保存領域が変更されたときにドキュメントのWindowオブジェクトで発生します。
例
Web Storage の典型的な使用法を示すため、想像力豊かに Web Storage Demo と名づけたシンプルな例を作成しました。 ランディングページには、色、フォント、装飾画像をカスタマイズするためのコントロールがあります。 別の選択肢を選ぶと、即座にページが更新されます。 さらに、選択内容を localStorage に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。
また、event output ページも提供します。 このページを別のタブで開くと、ランディングページで選択肢を変更したときに StorageEvent が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| HTML Living Standard | 現行の標準 |
ブラウザー実装状況
Window.localStorage
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
localStorage | Chrome 完全対応 4 | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 8 | Opera 完全対応 10.5 | Safari 完全対応 4 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 11 | Safari iOS 完全対応 3.2 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
Window.sessionStorage
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
sessionStorage | Chrome 完全対応 5 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 8 | Opera 完全対応 10.5 | Safari 完全対応 4 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 11 | Safari iOS 完全対応 3.2 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
プライベートブラウジング / シークレットモード
ほとんどの現行ブラウザーは 'シークレット' や 'プライベートブラウジング' などと呼ばれる、履歴やクッキーといったデータを保存しないプライバシーモードをサポートしています。 これらは明白な理由で、Web Storage とは根本的に互換性がありません。 それでもブラウザーベンダーは、この非互換性をどのように扱うかを、さまざまなシナリオで実験しています。
ほとんどのブラウザーは Storage API を有効にして、見かけ上完全に機能する方針をとっていますが、保存したデータはすべて、ブラウザーを閉じた後に消去されることが大きな違いです。 これらのブラウザーでは、既存の保存済みデータ (通常のブラウジングセッションで保存したもの) をどう扱うかについて、まださまざまな解釈が存在します。 このデータはプライベートモードで読み出せるべきでしょうか? 一部のブラウザー、特に Safari ではストレージは使用できますが空であり、また割り当てられたクォータが 0 バイトであるため事実上データを書き込めないという解決策をとっています。
開発者はこれらのさまざまな実装を意識して、Web Storage API に依存する Web サイトを開発する際に考慮するべきです。 詳しくはこのトピックを扱った、WHATWG のブログ記事（英語）をご覧ください。