Window: storage event

The storage event of the 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 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.

Syntax

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

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

Event type

A StorageEvent. Inherits from Event.

Event properties

key Read only: Returns a string with the key for the storage item that was changed. The key attribute is null when the change is caused by the storage clear() method.
newValue Read only: 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 storage clear() method, or the storage item has been removed from the storage.
oldValue Read only: 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.
storageArea Read only: Returns a Storage object that represents the storage object that was affected.
url Read only: Returns string with the URL of the document whose storage changed.

Event handler aliases

In addition to the Window interface, the event handler property onstorage is also available on the following targets:

Examples

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

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

Browser compatibility

BCD tables only load in the browser