⚡ Lesson 23 of 30

Local Storage & Sessions

Persist data in the browser using localStorage, sessionStorage, and the newer IndexedDB API.

localStorage Basics

Data in localStorage persists until explicitly cleared — survives page refreshes and browser restarts:

// Store
localStorage.setItem("username", "Alice");
localStorage.setItem("theme", "dark");

// Read
const name = localStorage.getItem("username");
console.log(name); // "Alice"

// Remove
localStorage.removeItem("theme");

// Clear all
localStorage.clear();

Storing Objects

localStorage only stores strings. Serialize objects with JSON:

const user = { name:"Alice", prefs:{ theme:"dark", lang:"en" } };
localStorage.setItem("user", JSON.stringify(user));

const loaded = JSON.parse(localStorage.getItem("user"));
console.log(loaded.prefs.theme); // "dark"

sessionStorage

sessionStorage works the same way but is cleared when the tab closes:

sessionStorage.setItem("currentStep", "2");
console.log(sessionStorage.getItem("currentStep")); // "2"

// Useful for multi-step forms, shopping cart drafts
// Data is isolated per tab

Storage Event

Listen for changes made by other tabs in the same origin:

window.addEventListener("storage", event => {
  console.log(`Key changed: ${event.key}`);
  console.log(`Old: ${event.oldValue}`);
  console.log(`New: ${event.newValue}`);
});

Cookie-like Expiry with localStorage

Implement expiring storage by wrapping items with a timestamp:

function setWithExpiry(key, value, ttlMs) {
  localStorage.setItem(key, JSON.stringify({
    value,
    expires: Date.now() + ttlMs,
  }));
}

function getWithExpiry(key) {
  const item = JSON.parse(localStorage.getItem(key));
  if (!item) return null;
  if (Date.now() > item.expires) { localStorage.removeItem(key); return null; }
  return item.value;
}

setWithExpiry("token", "abc123", 60 * 60 * 1000); // 1 hour

← Lesson 22 🏠 Home Lesson 24 →