Window: storage event
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.
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 auf dem Fenster ausgelöst, das die Änderung vorgenommen hat.
- Für
localStoragewird das Ereignis in allen anderen Browsing-Kontexten ausgelöst, die denselben Ursprung wie das auslösende Dokument haben. Dazu gehören andere Tabs mit demselben Ursprung. - Für
sessionStoragewird das Ereignis in allen anderen Browsing-Kontexten innerhalb desselben Ursprungs und desselben Top-Level-Browsing-Kontextes wie das auslösende Dokument ausgelöst. Dies schließt nur eingebettete iframes im selben Tab ein und nicht andere Tabs.
Dieses Ereignis kann nicht abgebrochen werden und es blubbert nicht.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("storage", (event) => { })
onstorage = (event) => { }
Ereignistyp
Ein StorageEvent, das von Event erbt.
Ereignis-Handler-Aliasse
Zusätzlich zur Window-Schnittstelle ist die Ereignis-Handler-Eigenschaft onstorage auch auf den folgenden Zielen verfügbar:
Beispiele
Protokollieren Sie das sampleList-Element in die 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-Ereignis-Handler-Eigenschaft erreicht werden:
window.onstorage = () => {
// When local storage changes, dump the list to
// the console.
console.log(JSON.parse(window.localStorage.getItem("sampleList")));
};
Spezifikationen
| Spezifikation |
|---|
| HTML # event-storage |
| HTML # handler-window-onstorage |