HTML onstorage Event Attribute
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:
- Synchronizing data between multiple browser tabs or windows.
- Saving and restoring user preferences.
- Implementing real-time data updates.
Syntax
<element onstorage="script">
Values
- scriptThe name of the script to use when the event has been triggered.
Example
Browser Support
The following information will show you the current browser support for the HTML onstorage event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.
This event attribute is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 14th October 2023