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 April 2017.

Thestorage event of theWindow interface fires when another document that shares the same storage area (eitherlocalStorage orsessionStorage) as the current window updates that storage area. The event isnot fired on the window that made the change.

ForlocalStorage, the event is fired in all otherbrowsing contexts that are in the same origin as the initiating document. This includes other tabs with the same origin.
ForsessionStorage, the event is fired in all otherbrowsing contexts that are in the same origin and the same top-level browsing context as the initiating document. This only includes embedded iframes, if any, in the same tab, and not other tabs.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

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

Event type

AStorageEvent. Inherits fromEvent.

Event properties

keyRead only: Returns a string with the key for the storage item that was changed.Thekey attribute isnull when the change is caused by the storageclear() method.
newValueRead only: Returns a string with the new value of the storage item that was changed.This value isnull when the change has been invoked by storageclear() method,or the storage item has been removed from the storage.
oldValueRead only: Returns a string with the original value of the storage item that was changed.This value isnull when the storage item has been newly addedand therefore doesn't have any previous value.
storageAreaRead only: Returns aStorage object that represents the storage object that was affected.
urlRead only: Returns string with the URL of the document whose storage changed.

Event handler aliases

In addition to theWindow interface, the event handler propertyonstorage is also available on the following targets:

Examples

Log thesampleList item to the console when thestorage 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 theonstorage event handler property:

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