HTML Academy · Lesson

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 — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Frequently asked questions

Is the “Listening for Storage Events” lesson free?

Yes — the full text of “Listening for Storage Events” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

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

← Back to HTML Academy