Window: storage イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

構文

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

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

イベント型

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

Event StorageEvent

イベントプロパティ

key 読取専用

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

newValue 読取専用

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

oldValue 読取専用

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

storageArea 読取専用

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

url 読取専用

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

関連情報