Web Storage API は、Cookie を使用するよりも直感的な方法で、ブラウザがキーと値のペアを保存できる仕組みを提供します。

Web Storage の概念と使用方法

Web Storage には、以下の 2 種類の仕組みがあります:

  • sessionStorage は、ページのセッション中 (ページの再読み込みや復元を含む、ブラウザを開いている間) に使用可能な、生成元ごとに区切られた保存領域を管理します。
  • localStorage も同様ですが、こちらはブラウザを閉じたり再び開いたりしても持続します。

これらの仕組みは Window.sessionStorage および Window.localStorage プロパティ (正確には、サポートするブラウザは Window オブジェクトが WindowLocalStorage および WindowSessionStorage オブジェクトを実装しており、これらに localStorage および sessionStorage プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると Storage オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。同じ生成元に対して sessionStoragelocalStorage は、別の Storage オブジェクトを使用します。これらは別々に制御されて機能します。

注記: Firefox 45 より、ブラウザがクラッシュまたは再起動したとき、生成元ごとに保存されるデータ量は 10MB に制限されます。Web Storage の使用量が過大であることによって発生するメモリの問題を避けるために、制限を設定しました。

注記: ユーザがサードパーティ Cookie を禁止している場合は、サードパーティの 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 および local Storage オブジェクトへのアクセス手段を提供します。また、保存領域が変更される (例えば新たなアイテムを保存する) と発生する、Window.onstorage イベントハンドラもあります。
StorageEvent
storage イベントは、保存領域が変更されたときにドキュメントの Window オブジェクトで発生します。

Web Storage の典型的な使用法を示すため、想像力豊かに Web Storage Demo と名づけたシンプルな例を作成しました。ランディングページには、色、フォント、装飾画像をカスタマイズするためのコントロールがあります。別の選択肢を選ぶと、即座にページが更新されます。さらに、選択内容を localStorage に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。

また、event output ページも提供します。このページを別のタブで開くと、ランディングページで選択肢を変更したときに StorageEvent が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。

仕様

仕様書 策定状況 コメント
HTML Living Standard 現行の標準  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 (有) 3.5 8 10.50 4
sessionStorage 5 (有) 2 8 10.50 4
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 2.1 (有) ? 8 11 iOS 3.2

すべてのブラウザで、localStorage および sessionStorage が受け入れる容量は異なります。さまざまなブラウザのストレージ容量を報告しているページがあります。

注記: iOS 5.1 より Safari Mobile は localStorage データを cache フォルダに保存しており、概して空き容量が少ない場合に OS の要求により、時々クリーンアップを受けます。

プライベートブラウジング / シークレットモード

ほとんどの現行ブラウザは 'シークレット' や 'プライベートブラウジング' などと呼ばれる、履歴や Cookie といったデータを保存しないプライバシーモードをサポートしています。これらは明白な理由で、Web Storage とは根本的に互換性がありません。それでもブラウザベンダーは、この非互換性をどのように扱うかを、さまざまなシナリオで実験しています。

ほとんどのブラウザは Storage API を有効にして、見かけ上完全に機能する方針をとっていますが、保存したデータはすべて、ブラウザを閉じた後に消去されることが大きな違いです。これらのブラウザでは、既存の保存済みデータ (通常のブラウジングセッションで保存したもの) をどう扱うかについて、まださまざまな解釈が存在します。このデータはプライベートモードで読み出せるべきでしょうか? 一部のブラウザ、特に Safari ではストレージは使用できますが空であり、また割り当てられたクォータが 0 バイトであるため事実上データを書き込めないという解決策をとっています。

開発者はこれらのさまざまな実装を意識して、Web Storage API に依存する Web サイトを開発する際に考慮するべきです。詳しくはこのトピックを扱った、WHATWG のブログ記事をご覧ください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, shuuji3, yyss
最終更新者: Uemmra3,