The HTML onstorage attribute is an event handler that triggers a script to execute when a web storage area (localStorage or sessionStorage) is updated by another document in another browser tab.
Definition and Usage
➔ This event is triggered when another document (different tab on the same origin) changes the shared storage area. The event is not fired on the specific window in which the change was made.
➔ The storage event does not trigger on the window or tab that is changing storage, but rather on other open tabs or windows from the same source.
➔ The onstorage attribute can be used on the <body> element and the window object.
➔ The event consists of a StorageEvent object, which provides the following properties:
- key: The key of the changed storage item.
- newValue: The new value of the key.
- oldValue: The old value of the key.
- url (uri): The URL of the document through which the storage change was made.
- storeArea: The storage object itself (localStorage or sessionStorage).
Syntax
//In HTML
<body onstorage="myFunction()">
//In JavaScript
window.onstorage = myFunction;
//OR
window.addEventListener('storage', myFunction);
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML onstorage Event Attribute Example</title>
<style>
.container {
display: flex;
justify-content: center;
}
.panel {
border: 1px solid #ccc;
margin: 20px;
padding: 20px;
width: 45%;
}
button,
input {
margin: 5px;
}
#log {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
min-height: 100px;
}
</style>
</head>
<body>
<h2>HTML onstorage Event Attribute Example</h2>
<p>This event is triggered when another document (different tab on the same origin) changes the shared storage area.
</p>
<h5>Note: So make change storage in one tab watch the event log output in other duplicate open tab.(RightClick
Duplicate Tab.)</h5>
<div class="container">
<!-- Panel 1: Initiator of the storage change -->
<div class="panel">
<h2>Tab 1: Set data to the storage.</h2>
<input type="text" id="keyInput" placeholder="Enter any name as key">
<input type="text" id="valueInput" placeholder="Enter any name as value">
<button onclick="setItem()">Set localStorage Item</button>
<button onclick="clearStorage()">Clear All Storage</button>
<p>Changes made here will trigger an event in other open tabs.</p>
</div>
<!-- Panel 2: Receiver of the event -->
<div class="panel">
<h2>Tab 2: Listen for Changes</h2>
<p>Watch this log area for events triggered by the other open tab:</p>
<div id="log"></div>
</div>
</div>
<script>
const logArea = document.getElementById('log');
function setItem() {
const key = document.getElementById('keyInput').value;
const value = document.getElementById('valueInput').value;
if (key && value) {
// Setting an item triggers the 'storage' event in other tabs
localStorage.setItem(key, value);
logMsg('Set item: key=' + key + ' to value=' + value + '(Event does not fire in this tab and no logs, See other tab)');
} else {
alert('Please enter both key and value.');
}
}
function clearStorage() {
// Clearing the items also triggers the 'storage' event.
localStorage.clear();
logMsg('Cleared storage (Event does not fire in this tab and no logs, See other tab)');
}
// Events trigger from other tabs
window.addEventListener('storage', function (event) {
logMsg('Storage Area: ' + event.storageArea === localStorage ? 'localStorage' : 'sessionStorage');
logMsg('URL(origin):' + event.url);
logMsg('Old value: ' + event.oldValue);
logMsg('New value: ' + event.newValue);
logMsg('Key: ' + event.key);
logMsg('------- Event Trigger and logs -------');
});
//logging messages
function logMsg(message) {
const entry = document.createElement('p');
entry.textContent = new Date().toLocaleTimeString() + " : " + message;
logArea.prepend(entry); // prepend messages.
//logArea.append(entry); // append messages.
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.