The storage event of the Window interface fires when a storage area (localStorage or sessionStorage) has been modified in the context of another document.

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

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

A StorageEvent. Inherits from Event.

key Read only

Returns a string that represents the key 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 key. This value is null when the change has been invoked by storage clear() method, or the key has been removed from the storage.

oldValue Read only

Returns a string with the original value of the key. This value is null when the key has been newly added and therefore doesn't have any previous value.

storageArea Read only

Returns a Storage object that represents the storage that was affected.

url Read only

Returns string with the URL of the document whose key changed.

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

• HTMLBodyElement
• HTMLFrameSetElement
• 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")));
};

• Web Storage API
• Using the Web Storage API
• Responding to storage changes with the StorageEvent