Window: storage event

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.

Das storage Ereignis der Window-Schnittstelle wird ausgelöst, wenn ein anderes Dokument, das denselben Speicherbereich (entweder localStorage oder sessionStorage) wie das aktuelle Fenster teilt, diesen Speicherbereich aktualisiert. Das Ereignis wird nicht im Fenster, das die Änderung vorgenommen hat, ausgelöst.

  • Bei localStorage wird das Ereignis in allen anderen Browsing-Kontexten ausgelöst, die im gleichen Ursprung wie das initiierende Dokument sind. Dies schließt andere Tabs mit demselben Ursprung ein.
  • Bei sessionStorage wird das Ereignis in allen anderen Browsing-Kontexten ausgelöst, die im gleichen Ursprung und im gleichen obersten Browsing-Kontext wie das initiierende Dokument sind. Dies schließt nur eingebettete iframes ein, falls vorhanden, im selben Tab, und nicht andere Tabs.

Dieses Ereignis kann nicht abgebrochen werden und löst keine Ereignisbubbling aus.

Syntax

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

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

Ereignistyp

Ein StorageEvent. Erbt von Event.

Event StorageEvent

Ereigniseigenschaften

key Schreibgeschützt

Gibt einen String mit dem Schlüssel des Storage-Items zurück, das geändert wurde. 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 Storage-Items zurück, das geändert wurde. Dieser Wert ist null, wenn die Änderung durch die clear()-Methode des Speichers hervorgerufen wurde, oder das Storage-Item aus dem Speicher entfernt wurde.

oldValue Schreibgeschützt

Gibt einen String mit dem ursprünglichen Wert des Storage-Items zurück, das geändert wurde. Dieser Wert ist null, wenn das Storage-Item 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-Aliase

Neben der Window-Schnittstelle steht die Ereignis-Handler-Eigenschaft onstorage auch auf den folgenden Zielen zur Verfügung:

Beispiele

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

js
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-Ereignis-Handler-Eigenschaft erreicht werden:

js
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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch