💾 Day 39 — Web Storage APIs: localStorage, sessionStorage & Cookies

Hi Guys Welcome to Day 39 🎯 You’ve fetched and displayed data, but what if you want to store user information directly inside the browser — without needing a backend or database? That’s where the Web Storage APIs come in: localStorage, sessionStorage, and Cookies.

📦 1️⃣ Why Store Data in the Browser?

Client-side storage allows your app to:

• 💡 Save preferences like dark mode or language.
• 🧮 Cache data for offline use.
• ⚡ Avoid unnecessary API calls.
• 🔐 Maintain login sessions (with tokens).

📁 2️⃣ localStorage — Permanent Storage

localStorage stores data with no expiration date — it stays until you manually clear it. Stored values persist even after closing or reopening the browser.

// Save data
localStorage.setItem("username", "Rahul");

// Retrieve data
const name = localStorage.getItem("username");
console.log(name);

// Remove one item
localStorage.removeItem("username");

// Clear everything
localStorage.clear();

✅ Stores strings only — use JSON.stringify() for objects.

const user = { name: "Aisha", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name);

🧭 3️⃣ sessionStorage — Temporary Storage

sessionStorage is similar but lives only for a browser tab session. Once the tab is closed, the data disappears.

sessionStorage.setItem("activeTab", "Dashboard");
console.log(sessionStorage.getItem("activeTab"));

Use this for temporary information like current page state or ongoing quiz progress.

🍪 4️⃣ Cookies — Old but Still Useful

Cookies store small pieces of data (max 4KB) and are automatically sent to the server with every HTTP request.

document.cookie = "theme=dark; expires=Fri, 31 Dec 2025 23:59:59 UTC; path=/";

console.log(document.cookie);

• Good for authentication tokens.
• Bad for large storage (size limit).
• Always specify expiration to avoid clutter.

🧩 5️⃣ Comparison Table

Feature	localStorage	sessionStorage	Cookies
Lifetime	Until cleared	Until tab closed	Set by expiry date
Storage Limit	~5MB	~5MB	4KB
Accessible by	Browser	Browser	Browser + Server
Best for	Preferences, cache	Session data	Login tokens

⚙️ 6️⃣ Practical Example — Dark Mode Toggle

const toggleBtn = document.getElementById("toggleMode");
let currentMode = localStorage.getItem("mode") || "light";

document.body.className = currentMode;
toggleBtn.innerText = currentMode === "light" ? "🌙 Dark" : "☀️ Light";

toggleBtn.addEventListener("click", ()=>{
  currentMode = currentMode === "light" ? "dark" : "light";
  document.body.className = currentMode;
  localStorage.setItem("mode", currentMode);
  toggleBtn.innerText = currentMode === "light" ? "🌙 Dark" : "☀️ Light";
});

🧠 7️⃣ Best Practices

• Always convert objects using JSON.stringify().
• Don’t store sensitive info like passwords.
• Use cookies only for authentication or tracking.
• Clear old keys periodically.

🎯 Summary

You’ve learned how to save, retrieve, and manage data directly in the browser. Now, it’s time to use these skills in a hands-on project — building a Weather Dashboard that fetches live data and stores user preferences!

← Prev Next →