Browser Storage: localStorage & sessionStorage

1. Simple Definition

Web Storage API hume user ke computer/browser ke andar data (jaise Dark Mode setting, To-Do list items, ya shopping cart) save karne ki power deta hai. localStorage me data tab tak rehta hai jab tak user khud browser history delete na kare (even after system restart!). sessionStorage me data sirf tab tak rehta hai jab tak browser tab open hai (tab band hote hi data khatam).

2. Real-Life Analogy

3. Why Do We Need It?

Bina storage ke agar user page refresh (F5) karega, toh uska saara unsaved data, selected dark theme aur cart items turant gayab ho jayenge. Storage zero database ke client-side state persist karti hai.

4. Syntax & The JSON Stringify/Parse Rule

// 1. Storing Plain Strings
localStorage.setItem("user_theme", "dark");
const savedTheme = localStorage.getItem("user_theme"); // "dark"

// 2. Storing Objects / Arrays (CRITICAL: Must convert to JSON string!)
const cart = [
  { id: 101, title: "Headphones", price: 1999 },
  { id: 102, title: "Backpack", price: 899 }
];

// SAVE: Object -> String
localStorage.setItem("my_cart", JSON.stringify(cart));

// READ: String -> Object
const retrievedCart = JSON.parse(localStorage.getItem("my_cart"));
console.log(retrievedCart[0].title); // "Headphones"

// 3. Remove or Clear
localStorage.removeItem("user_theme"); // Single key delete
localStorage.clear(); // Sabhi keys permanently delete!

5. Basic Example (Theme Persistence in Action)

// Auto-apply theme on page load
function applySavedTheme() {
  const currentTheme = localStorage.getItem("preferred_theme") || "light";
  document.documentElement.setAttribute("data-theme", currentTheme);
}

function toggleTheme() {
  const current = document.documentElement.getAttribute("data-theme");
  const next = current === "dark" ? "light" : "dark";
  
  // Save to browser locker
  localStorage.setItem("preferred_theme", next);
  document.documentElement.setAttribute("data-theme", next);
}

6. Output / Expected Result

7. Code Explanation: Storage Comparison Matrix

8. Real-World Example

Isi website par jo aapka course completion progress aur Dark/Light mode theme switch hota hai, wo localStorage ke zariye hi save rehta hai bina kisi user login ke!

9. Common Mistakes: Direct Object Pass Karna

10. Best Practices

• Sensitive data (jaise user credit card numbers, passwords, JWT auth tokens without secure flags) ko kabhi bhi localStorage me store na karein kyunki XSS attack se malicious scripts ise chura sakti hain.
• Hamesha JSON.parse() ko try...catch me wrap karein taaki corrupted data aane par app crash na ho.

11. Try It Yourself

Playground me localStorage.setItem("learnerName", "Aapka Naam"); likhein aur console me localStorage.getItem("learnerName") inspect karein.

12. Challenge

Ek Simple Notes Widget banayein jisme textarea me type hone wala har shabd localStorage me auto-save hota rahe (input event par).

13. Interview Questions

14. Quick Revision

• localStorage = Permanent (~5-10MB).
• sessionStorage = Tab duration.
• Always JSON.stringify() before saving objects.
• Always JSON.parse() after reading objects.

15. FAQ

Browser Storage: localStorage & sessionStorage

1. Simple Definition

Browser Web Storage allows web applications to store key-value data persistently on the client's browser. localStorage persists data indefinitely until explicitly cleared, while sessionStorage retains data only for the lifespan of the current browser tab.

2. Real-Life Analogy

3. Storage Comparison Table

4. Storing Objects & Arrays (JSON Serialization)

// Web Storage ONLY stores strings! Objects must be serialized via JSON:
const userPreferences = { theme: "dark", language: "english", notifications: true };

// 1. Save to localStorage
localStorage.setItem("user_prefs", JSON.stringify(userPreferences));

// 2. Read from localStorage with error safety
try {
  const savedData = localStorage.getItem("user_prefs");
  const parsed = savedData ? JSON.parse(savedData) : null;
  console.log("Loaded Theme:", parsed?.theme);
} catch (err) {
  console.error("Corrupted localStorage data:", err);
}

// 3. Clear storage
localStorage.removeItem("user_prefs");
localStorage.clear(); // Clears all keys for current origin

5. Common Mistakes

6. Best Practices

• Never store sensitive data (JWT auth tokens, passwords, credit card numbers) in localStorage due to XSS vulnerability.
• Always wrap JSON.parse() calls in a try/catch block.
• Listen to the window.addEventListener("storage", ... ) event to synchronize tabs.

7. Practice Exercise

8. Interview Questions

9. Summary / Cheat Card

• localStorage persists permanently per domain origin.
• sessionStorage clears automatically when the tab closes.
• Always use JSON.stringify() to write and JSON.parse() to read.

10. FAQ