ウェブストレージ API

ウェブストレージには、以下の 2 種類の仕組みがあります。

• sessionStorage は、ページのセッション中（ページの再読み込みや復元を含む、ブラウザーを開いている間）に使用可能な、オリジンごとに区切られた保存領域を管理します。

  • 1 セッションのデータのみを保存します。つまり、データはブラウザー（またはタブ）が閉じられるまで保存されます。
  • データがサーバーに転送されることはありません。
  • ストレージの上限が Cookie よりも大きいです（最大 5MB）。

• localStorage も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。

  • 有効期限なしでデータを保存し、JavaScript によるクリア、もしくは、ブラウザーキャッシュ/ローカルに保存したデータのクリアによってのみクリアされます。
  • ストレージ制限は 2 つの中で最大です。

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

Storage

特定のドメインおよびストレージタイプ（セッションまたはローカル）に対して、データを保存、取り出し、削除できます。

Window

ウェブストレージ API は Window オブジェクトを、Window.sessionStorage および Window.localStorage という 2 つの新たなプロパティで拡張します。これらは、それぞれ現在のドメインのセッションおよびローカルの Storage オブジェクトへのアクセス手段を提供します。 また、保存領域が変更される（例えば新たなアイテムを保存する）と発生する、storage イベントハンドラーもあります。

StorageEvent

storage イベントは、保存領域が変更されたときにドキュメントの Window オブジェクトで発生します。

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

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

プライベートウィンドウ、シークレットモード、および同様の名前のプライバシーブラウジングオプションでは、履歴やクッキーのようなデータは格納されません。プライベートモードでは localStorage は sessionStorage のように扱われます。ストレージ API が利用可能で完全に機能しますが、プライベートウィンドウに格納されたデータはすべてブラウザーまたはブラウザータブが閉じられたときに削除されます。

• ウェブストレージ API の使用
• ブラウザーのストレージ制限と削除基準