localStorage & sessionStorage
localStorage/sessionStorage browser mein KEY-VALUE data save karte hain, bina server ke — .setItem(key, value), .getItem(key), .removeItem(key), .clear(). Dono sirf STRINGS store karte hain — objects/arrays ko JSON.stringify() karna padta hai save karne se pehle.
Farq: localStorage PERMANENT hai (manually clear na karo, ya user browser data clear na kare, tab tak rehta hai). sessionStorage sirf current TAB/SESSION tak — tab band karte hi gayab.
// Saving:
localStorage.setItem("username", "Aarav");
localStorage.setItem("preferences", JSON.stringify({ theme: "dark" }));
// Reading:
const username = localStorage.getItem("username");
const prefs = JSON.parse(localStorage.getItem("preferences"));
console.log(username); // "Aarav"
console.log(prefs.theme); // "dark"
// Removing:
localStorage.removeItem("username");
localStorage.clear(); // sab kuch clear karo
// sessionStorage — SAME API, alag lifetime:
sessionStorage.setItem("tempData", "sirf is tab ke liye");- localStorage = permanent, sessionStorage = sirf current tab tak
- Sirf strings store hoti hain — objects ke liye JSON.stringify()/parse()
- Login state, theme preference, form drafts jaise use-cases ke liye common
Jab ek TAB mein localStorage change hoti hai, doosre OPEN TABS (same origin) ko "storage" event milta hai — cross-tab communication ke liye useful, jaise ek tab mein logout karne par doosre tabs ko bhi bataना.
window.addEventListener("storage", (event) => {
console.log("Key changed: " + event.key);
console.log("Old value: " + event.oldValue);
console.log("New value: " + event.newValue);
});
// Note: event current tab mein NAHI fire hota jisne change kiya,
// sirf DOOSRE open tabs mein fire hota hailocalStorage/sessionStorage ki ek size limit hoti hai (usually ~5-10MB per origin, browser-dependent) — limit exceed karne par QuotaExceededError throw hota hai. Bade data ke liye IndexedDB (browser database) better fit hai.
try {
localStorage.setItem("bigData", hugeJsonString);
} catch (error) {
if (error.name === "QuotaExceededError") {
console.log("Storage full hai! Purana data clear karo.");
}
}