JavaScript Storage & BOM
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
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.
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
javascript
window.addEventListener("storage", function (event) {
// another tab changed something
});Listen on window, not on the storage object.
The tab that makes the change never sees its own event.
This is deliberate, to avoid a tab reacting to itself.
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.
Every relevant detail is on the event object.
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.
A common use is keeping a logged-in state consistent everywhere.
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.
Calling clear() produces an event with key set to null.
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.
The event only relates to localStorage.
sessionStorage is already isolated per tab, so there is nothing to notify.
Example
javascript
console.log("sessionStorage changes stay in this tab only");This is a direct consequence of sessionStorage's per-tab scope.
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>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.
storage event fires when another tab changes localStorage.event.key, oldValue and newValue describe the change.clear() fires it with key set to null.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.