Storage Events and Limits
React to changes and respect quota limits.
Storage Events and Limits is a free JavaScript Academy lesson on CoddyKit — lesson 4 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 JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Reacting to Storage Changes
The storage event lets one tab react when another tab changes localStorage. It enables simple cross-tab synchronization.
Listening for storage
Add a listener on window. It fires in OTHER tabs of the same origin whenever localStorage changes, not in the tab that made the change.
window.addEventListener("storage", (e) => {
console.log("Key changed:", e.key);
});The StorageEvent Object
The event carries key, oldValue, newValue, storageArea, and url. Together they describe exactly what changed.
window.addEventListener("storage", (e) => {
console.log(e.key, e.oldValue, "->", e.newValue);
});Fires Only in Other Tabs
A key subtlety: the event does NOT fire in the same tab that called setItem. It is meant to notify the others, so do not rely on it for same-tab updates.
Cross-Tab Sync Pattern
Use the event to keep tabs consistent, for example logging the user out everywhere when one tab clears the auth token.
window.addEventListener("storage", (e) => {
if (e.key === "token" && e.newValue === null) {
logoutUI();
}
});Detecting clear()
When clear() runs, the event fires with key set to null. Handle that case to reset everything.
window.addEventListener("storage", (e) => {
if (e.key === null) resetApp();
});The Storage Quota
Each origin gets a limited budget, commonly around 5MB total for localStorage. This is far smaller than IndexedDB, so store only modest amounts.
Quota Exceeded Errors
Exceeding the quota throws a QuotaExceededError on setItem. Always wrap large or untrusted writes in try/catch.
try {
localStorage.setItem("big", hugeString);
} catch (e) {
console.log("Storage full:", e.name);
}UTF-16 Counts Double
Strings are stored as UTF-16, so each character uses roughly 2 bytes. A 5MB quota holds about 2.5 million characters, less for non-ASCII text.
Estimating Usage
You can roughly measure usage by summing key and value lengths. There is no exact API, but this gives a usable estimate.
let total = 0;
for (let i = 0; i < localStorage.length; i++) {
const k = localStorage.key(i);
total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");When to Use Something Bigger
For large or structured data beyond a few MB, reach for IndexedDB. Web Storage is best for small flags, preferences, and tokens.
Quick Check
Storage events and limits.
Recap
The storage event notifies OTHER tabs of an origin about localStorage changes, carrying key, oldValue, and newValue (key is null on clear). Quotas are roughly 5MB and writing past them throws QuotaExceededError, so wrap risky writes in try/catch and use IndexedDB for larger data.
Frequently asked questions
Is the “Storage Events and Limits” lesson free?
Yes — the full text of “Storage Events and Limits” is free to read here on the web, and the JavaScript 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 JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Storage Events and Limits”?
React to changes and respect quota limits. You practise JavaScript 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 JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Storage Events and Limits” 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 JavaScript Academy lesson?
Yes. Every JavaScript 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
- Storing and Reading Data
- localStorage vs sessionStorage
- Storing Objects with JSON
- Storage Events and Limits