Window: storage イベント

storage イベントは、保存領域 (localStorage) が変更されたときに発生します。詳しくはウェブストレージ API をご覧ください。

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

構文

このイベント名を addEventListener() などのメソッドで使うか、イベントハンドラープロパティを設定するかしてください。

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

イベント型

StorageEvent です。 Event を継承しています。

Event StorageEvent

イベントプロパティ

key (en-US) 読取専用

変更されたキーを表す文字列を返します。 変更が発生したのがこのストレージの clear() メソッドによるものであれば、 key 属性は null になります。

newValue (en-US) 読取専用

key の新しい値を文字列で返します。 このストレージの clear() メソッドが呼び出されたり、その key がストレージから削除されたりして変更が行われた場合は、この値は null になります。

oldValue (en-US) 読取専用

key の元の値を文字列で返します。 その key が新しく追加されたものであるため、以前の値が存在しない場合は、この値は null になります。

storageArea (en-US) 読取専用

変更が行われたストレージを表す Storage オブジェクトを返します。

url (en-US) 読取専用

key を変更した文書の URL を文字列で返します。

イベントハンドラーの別名

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

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

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

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

js
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

関連情報