Window: storage イベント

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

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

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

key 読取専用

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

newValue 読取専用

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

oldValue 読取専用

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

storageArea 読取専用

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

url 読取専用

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

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

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

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

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

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

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

• ウェブストレージ API
• ウェブストレージ API の使用
• StorageEvent を使用してストレージの変更に反応する