title | short-title | slug | page-type | browser-compat |
---|---|---|---|---|
Window: storage event |
storage |
Web/API/Window/storage_event |
web-api-event |
api.Window.storage_event |
{{APIRef}}
The storage
event of the {{domxref("Window")}} interface fires when a storage area (localStorage
or sessionStorage
) has been modified in the context of another document.
This event is not cancelable and does not bubble.
Note: This won't work on the same {{Glossary("browsing context")}} that is making the changes — it is really a way for other browsing contexts on the domain using the storage to sync any changes that are made. Browsing contexts on other domains can't access the same storage objects.
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("storage", (event) => {});
onstorage = (event) => {};
A {{domxref("StorageEvent")}}. Inherits from {{domxref("Event")}}.
{{InheritanceDiagram("StorageEvent")}}
- {{domxref("StorageEvent.key", "key")}} {{ReadOnlyInline}}
- : Returns a string with the key for the storage item that was changed.
The
key
attribute isnull
when the change is caused by the storageclear()
method.
- : Returns a string with the key for the storage item that was changed.
The
- {{domxref("StorageEvent.newValue", "newValue")}} {{ReadOnlyInline}}
- : Returns a string with the new value of the storage item that was changed.
This value is
null
when the change has been invoked by storageclear()
method, or the storage item has been removed from the storage.
- : Returns a string with the new value of the storage item that was changed.
This value is
- {{domxref("StorageEvent.oldValue", "oldValue")}} {{ReadOnlyInline}}
- : Returns a string with the original value of the storage item that was changed.
This value is
null
when the storage item has been newly added and therefore doesn't have any previous value.
- : Returns a string with the original value of the storage item that was changed.
This value is
- {{domxref("StorageEvent.storageArea", "storageArea")}} {{ReadOnlyInline}}
- : Returns a {{DOMxRef("Storage")}} object that represents the storage object that was affected.
- {{domxref("StorageEvent.url", "url")}} {{ReadOnlyInline}}
- : Returns string with the URL of the document whose storage changed.
In addition to the Window
interface, the event handler property onstorage
is also available on the following targets:
- {{domxref("HTMLBodyElement")}}
- {{domxref("HTMLFrameSetElement")}}
- {{domxref("SVGSVGElement")}}
Log the sampleList
item to the console when the storage
event fires:
window.addEventListener("storage", () => {
// When local storage changes, dump the list to
// the console.
console.log(JSON.parse(window.localStorage.getItem("sampleList")));
});
The same action can be achieved using the onstorage
event handler property:
window.onstorage = () => {
// When local storage changes, dump the list to
// the console.
console.log(JSON.parse(window.localStorage.getItem("sampleList")));
};
{{Specifications}}
{{Compat}}
- {{domxref("Web Storage API", "", "", "nocode")}}
- Using the Web Storage API
- Responding to storage changes with the StorageEvent