Window: storage イベント

storage イベントは、保存領域 (localStorage または sessionStorage) が変更されたときに発生します。詳しくは Web Storage API をご覧ください。

メモ: これは変更を行ったのと同じページでは動作しません。本来、これは同じ保存領域を使用している同じドメインの他のページが更新を同期するための仕組みです。他のドメインのページは、同じ保存領域オブジェクトにはアクセスできません。

一般情報

仕様 Web Storage
インターフェイス StorageEvent
バブリング 不可
キャンセル可能か 不可
ターゲット DefaultView (<window>)
既定のアクション なし

文法

addEventListener() のようなメソッドでイベント名を使うか、イベントハンドラープロパティを設定します。

addEventListener('storage', (event) => { });
onstorage = (event) => { };

イベント型

Event を継承した StorageEvent

Event StorageEvent

イベントプロパティ

プロパティ 型 説明
target 読取専用 EventTarget イベントの対象 (DOMツリーの中で最上位の対象)
type 読取専用 DOMString イベントの種類
bubbles 読取専用 Boolean イベントが通常バブリングするか
cancelable 読取専用 Boolean イベントをキャンセル可能か
key 読取専用 DOMString (string) 変更されたキー
oldValue 読取専用 DOMString (string) 変更されたキーの変更前の値
newValue 読取専用 DOMString (string) 変更されたキーの変更後の値
url 読取専用 DOMString (string) キーが変更されたドキュメントのアドレス
storageArea 読取専用 Storage 変更された Storage オブジェクト

イベントハンドラーエイリアス

Window インターフェイスに加え、イベントハンドラープロパティ onstorage は以下の対象でも利用可能です。

例

storage イベントが発生した時、項目 sampleList をコンソールに記録します。

window.addEventListener('storage', () => {
  // ローカルストレージが変更された時、
  // リストをコンソールに書き出す。
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
});

onstorage イベントハンドラープロパティを用いても、同じことができます。

window.onstorage = () => {
  // ローカルストレージが変更された時、
  // リストをコンソールに書き出す。
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
};

仕様書

Specification
HTML Standard
# event-storage
HTML Standard
# handler-window-onstorage

ブラウザーの互換性

BCD tables only load in the browser

関連情報