JavaScript Storage & BOM
JavaScript Storage Events
The
storageevent fires in other tabs whenlocalStoragechanges.
This is how two open tabs on the same site can talk to each other.
It never fires in the tab that made the change.
Example
Example
javascript
window.addEventListener("storage", function (event) {
console.log(event.key + " changed to " + event.newValue);
});
console.log("listener attached");The listener only fires when a different tab changes storage.
Nothing else in this snippet triggers it.
The Event Object
event.key is the key that changed.
event.newValue and event.oldValue show the change.
event.storageArea says whether it was local or session storage.
Syntax
Syntax
javascript
window.addEventListener("storage", function (event) {
// another tab changed something
});Listen on window, not on the storage object.
It Only Fires in Other Tabs
The tab that makes the change never sees its own event.
This is deliberate, to avoid a tab reacting to itself.
Example
Example
javascript
let heard = false;
window.addEventListener("storage", function () {
heard = true;
});
localStorage.setItem("test", "value");
console.log(heard);The output is false, because this is the same tab.
What the Event Carries
Every relevant detail is on the event object.
Example
Example
javascript
function handleChange(event) {
return event.key + ": " + event.oldValue + " -> " + event.newValue;
}
const fakeEvent = { key: "theme", oldValue: "light", newValue: "dark" };
console.log(handleChange(fakeEvent));A real event from another tab has exactly this shape.
Syncing State Across Tabs
A common use is keeping a logged-in state consistent everywhere.
Example
Example
javascript
function onStorageChange(event) {
if (event.key === "loggedOut") {
return "reload this tab too";
}
return "ignore";
}
console.log(onStorageChange({ key: "loggedOut", newValue: "true" }));
console.log(onStorageChange({ key: "theme", newValue: "dark" }));Only the key you care about triggers a reaction.
clear Also Fires It
Calling clear() produces an event with key set to null.
Example
Example
javascript
function describe(event) {
return event.key === null ? "everything was cleared" : event.key + " changed";
}
console.log(describe({ key: null }));
console.log(describe({ key: "theme" }));Check for null to handle a full clear specially.
sessionStorage Does Not Fire It
The event only relates to localStorage.
sessionStorage is already isolated per tab, so there is nothing to notify.
Example
Example
javascript
console.log("sessionStorage changes stay in this tab only");This is a direct consequence of sessionStorage's per-tab scope.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Storage Events</title>
</head>
<body>
<h1>Storage Events</h1>
<p id="out">Open this page in two tabs and change the theme in one.</p>
<button id="toggle">Toggle theme</button>
<script>
const out = document.getElementById("out");
document.getElementById("toggle").addEventListener("click", function () {
const current = localStorage.getItem("theme") || "light";
localStorage.setItem("theme", current === "light" ? "dark" : "light");
});
window.addEventListener("storage", function (event) {
if (event.key === "theme") {
out.textContent = "Another tab changed the theme to " + event.newValue;
}
});
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try two tabs:
Open the page twice and click the button in one to see the other react.
Important Points
- The
storageevent fires when another tab changes localStorage. - It never fires in the tab making the change.
event.key,oldValueandnewValuedescribe the change.clear()fires it withkeyset tonull.- sessionStorage never triggers this event.
Conclusion
The storage event is how separate tabs of the same site can stay in sync.
It is quiet by design, only speaking up when something outside the tab changed.
It is a small feature that solves a real, common problem.