Listening for Storage Events
React to cross-tab storage changes with the storage event.
Listening for Storage Events is a free HTML Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
Cross-Tab Communication
Web Storage fires a storage event on every other same-origin tab whenever localStorage changes. This is the simplest way to keep multiple open tabs of the same app in sync — for example, propagating a logout or a theme switch.
Registering a Listener
Attach the handler on window: window.addEventListener("storage", handleStorage). The listener fires only in other tabs/windows of the same origin — never in the tab that performed the change itself, which already knows about the update.
window.addEventListener("storage", (e) => {
console.log("key:", e.key, "new:", e.newValue);
});StorageEvent Properties
The event carries key (the key that changed), oldValue and newValue (strings or null), url (page that triggered the change), and storageArea (the Storage object — localStorage or sessionStorage).
clear() Sets key to null
When another tab calls localStorage.clear(), the storage event fires once with key === null and both oldValue and newValue null. Detect this pattern to handle bulk-clear separately from single-key updates.
removeItem Behavior
A removeItem call fires the event with newValue === null and oldValue holding the previous string. Distinguish "key deleted" from "key set to null string" by checking that newValue is strictly null rather than the string "null".
Same-Tab Limitation
The event never fires in the tab that wrote the change. To react to your own writes, dispatch a custom event after setItem, or wrap setItem in a helper that calls both the storage API and your in-app event bus.
function setItem(key, val) {
localStorage.setItem(key, val);
window.dispatchEvent(new CustomEvent("local-storage", { detail: { key, val } }));
}Cross-Tab Logout
Set a key like auth:logout with a timestamp when a user signs out. Other tabs listen for that key in the storage event and immediately clear their own session state, redirecting to the login page without the user clicking again.
Theme and Preference Sync
When the user toggles theme in one tab, write theme to localStorage. The storage handler in every other tab reads the new value and applies document.documentElement.dataset.theme — the change appears instantly across all open tabs.
Filtering by Key
One handler can serve many features by branching on e.key. A switch statement keeps the dispatcher readable: each case handles one storage key and ignores unrelated changes that other features write to the same Storage.
sessionStorage Does Not Cross Tabs
sessionStorage is per-tab — its writes never fire storage events in other tabs because they have their own independent sessionStorage. Use localStorage when cross-tab signalling is needed, even if you immediately remove the key afterward.
BroadcastChannel Alternative
For richer cross-tab messaging, the BroadcastChannel API sends structured data without touching storage: new BroadcastChannel("app").postMessage({ type: "logout" }). Use BroadcastChannel for transient signals and storage events for state that also needs to persist.
Knowledge Check
If Tab A calls localStorage.setItem("theme", "dark"), which tabs receive the storage event?
Summary
The storage event delivers cross-tab notifications whenever localStorage changes in another tab, with key, oldValue, newValue and storageArea. It does not fire in the writing tab, so combine it with a custom event for full local + remote dispatch. Use it for logout propagation, theme sync, and any state that should stay consistent across browser windows.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Listening for Storage Events” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “Listening for Storage Events”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “Listening for Storage Events”?
React to cross-tab storage changes with the storage event. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “Listening for Storage Events” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- localStorage vs sessionStorage
- Getting Setting and Removing Items
- Listening for Storage Events
- Security What Never to Store in Storage