HTML onstorage Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The onstorage HTML event attribute specifies a JavaScript function to be run when a Web Storage area is updated. Web Storage is a mechanism for storing data on the client side, and there are two types of Web Storage: session storage and local storage. Session storage is cleared when the browser window is closed, while local storage persists until the user explicitly clears it.

The onstorage event can be used to listen for changes to either session storage or local storage. It can be attached to the body element of an HTML document, or to the window object. When a change is detected, the onstorage event handler function is called.

The onstorage event handler function receives a single argument, which is an StorageEvent object. This object contains information about the change that occurred, such as the key of the changed item, the old value of the item, and the new value of the item.

Here is an example of how to use the onstorage event attribute:

<body onstorage="onStorageChange()">
</body>

function onStorageChange(event) {
  // Get the key of the changed item.
  var key = event.key;

  // Get the old value of the item.
  var oldValue = event.oldValue;

  // Get the new value of the item.
  var newValue = event.newValue;

  // Do something with the changed item.
}

The onstorage event can be used to implement a variety of features, such as: