Day 22 Local Storage & Session Storage
localStorage aur sessionStorage browser mein data store karne ke tarike hain — page refresh hone ke baad bhi data rehta hai. Dark mode preference, cart items, user settings — sab localStorage mein store hote hain.
localStorage Basics
localStorage mein data strings mein store hota hai. JSON se objects bhi store kar sakte hain.
// Save karo
localStorage.setItem("username", "Zohaib");
localStorage.setItem("theme", "dark");
// Read karo
let name = localStorage.getItem("username");
console.log(name); // "Zohaib"
// Delete karo
localStorage.removeItem("theme");
// Sab clear karo
localStorage.clear();
// Objects store karo (JSON convert karke)
let user = { name: "Ali", age: 25, city: "Lahore" };
localStorage.setItem("user", JSON.stringify(user));
// Wapis read karo
let saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name); // "Ali"
localStorage vs sessionStorage
localStorage tab tak rehta hai jab tak manually delete na karo. sessionStorage tab close hone par delete ho jata hai.
// localStorage — permanent (until cleared)
localStorage.setItem("cart", JSON.stringify(["item1", "item2"]));
// sessionStorage — tab close hone par gone
sessionStorage.setItem("tempData", "some value");
// Practical: Dark mode toggle
function toggleTheme() {
let current = localStorage.getItem("theme") || "light";
let next = current === "light" ? "dark" : "light";
localStorage.setItem("theme", next);
document.body.className = next;
}
// On page load — restore theme
let savedTheme = localStorage.getItem("theme");
if (savedTheme) document.body.className = savedTheme;
🎯 Practice Challenge
Todo app mein localStorage add karo. Todos save karo setItem se, load karo getItem se. Page refresh karne par todos wapas aane chahiye.