Fenster: storage-Ereignis

Baseline Widely available

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

Das storage-Ereignis des Window-Interfaces wird ausgelöst, wenn ein anderes Dokument, das dieselbe Speichereinheit (entweder localStorage oder sessionStorage) wie das aktuelle Fenster teilt, diese Speichereinheit aktualisiert. Das Ereignis wird nicht auf dem Fenster ausgelöst, das die Änderung vorgenommen hat.

Bei localStorage wird das Ereignis in allen anderen Browsing-Kontexten ausgelöst, die denselben Ursprung wie das auslösende Dokument haben. Dies schließt andere Tabs mit demselben Ursprung ein.
Bei sessionStorage wird das Ereignis in allen anderen Browsing-Kontexten ausgelöst, die denselben Ursprung und denselben obersten Browsing-Kontext wie das auslösende Dokument haben. Dies schließt nur eingebettete iframes im selben Tab ein, jedoch nicht andere Tabs.

Dieses Ereignis ist nicht abbrechbar und wird nicht weitergegeben.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

onstorage = (event) => { }

Ereignistyp

Ein StorageEvent. Erbt von Event.

Ereigniseigenschaften

key Schreibgeschützt: Gibt einen String mit dem Schlüssel des geänderten Speicherelements zurück. Das key-Attribut ist null, wenn die Änderung durch die clear()-Methode des Speichers verursacht wurde.
newValue Schreibgeschützt: Gibt einen String mit dem neuen Wert des geänderten Speicherelements zurück. Dieser Wert ist null, wenn die Änderung durch die clear()-Methode des Speichers ausgelöst wurde, oder das Speicherelement aus dem Speicher entfernt wurde.
oldValue Schreibgeschützt: Gibt einen String mit dem ursprünglichen Wert des geänderten Speicherelements zurück. Dieser Wert ist null, wenn das Speicherelement neu hinzugefügt wurde und daher keinen vorherigen Wert hat.
storageArea Schreibgeschützt: Gibt ein Storage-Objekt zurück, das das betroffene Speicherobjekt darstellt.
url Schreibgeschützt: Gibt einen String mit der URL des Dokuments zurück, dessen Speicher sich geändert hat.

Ereignishandler-Aliasse

Zusätzlich zum Window-Interface ist die Ereignishandlereigenschaft onstorage auch auf den folgenden Zielen verfügbar:

Beispiele

Protokollieren Sie das sampleList-Element in der Konsole, wenn das storage-Ereignis ausgelöst wird:

window.addEventListener("storage", () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem("sampleList")));
});

Die gleiche Aktion kann durch die Verwendung der onstorage-Ereignishandlereigenschaft erreicht werden:

window.onstorage = () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem("sampleList")));
};

Spezifikationen

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