ウェブストレージ API

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

ウェブストレージの概念と用途

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

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

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

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

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

メモ: Firefox では、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。詳しくは、ブラウザーのストレージ制限と削除基準を参照してください。

メモ: ユーザーがサードパーティの Cookie を禁止している(英語)場合は、サードパーティの iframe からウェブストレージにアクセスできません。

ウェブストレージインターフェイス

Storage

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

Window

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

StorageEvent

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

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

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

仕様書

Specification
HTML
# dom-localstorage-dev
HTML
# dom-sessionstorage-dev

ブラウザーの互換性

api.Window.localStorage

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
localStorage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

api.Window.sessionStorage

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
sessionStorage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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

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

関連情報