localStorage, sessionStorage and Cookies

Websites remember things: your dark-mode choice, a half-filled form, the items in a guest cart, which lessons you've completed. Browsers give JavaScript several places to keep that data. Choosing the right one – and knowing what must never be stored in the browser – is part of building apps that are both convenient and secure.

The options at a glance

localStorage basics

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));     // "dark"
console.log(localStorage.getItem("missing"));   // null

localStorage.setItem("visits", 3);              // stored as the string "3"
const visits = Number(localStorage.getItem("visits")) + 1;

localStorage.removeItem("theme");
localStorage.clear();                           // removes everything for this site

Storage is per origin (protocol + domain + port): https://learnfrenzy.com can't read another site's data. sessionStorage has exactly the same methods but is cleared when the tab closes and isn't shared between tabs.

Storing objects: JSON

Storage only holds strings. Store objects with JSON.stringify and read them with JSON.parse – inside try/catch, because stored data can be missing, old or corrupted:

const cart = [{ sku: "PEN", qty: 2 }, { sku: "BAG", qty: 1 }];
localStorage.setItem("cart", JSON.stringify(cart));

function readCart() {
  try {
    return JSON.parse(localStorage.getItem("cart")) ?? [];
  } catch {
    return [];                                  // corrupted value → start fresh
  }
}

A reusable storage helper with expiry

Real apps wrap storage in a small helper: JSON handling, a key prefix, an optional expiry time, and safety when storage is full or blocked (private mode, browser settings). The helper below takes the storage object as a parameter, so here it runs with a simple in-memory stand-in; in the browser you pass localStorage.

function createStore(storage, prefix = "lf:") {
  return {
    set(key, value, ttlMs) {
      const record = { value, expires: ttlMs ? Date.now() + ttlMs : null };
      try {
        storage.setItem(prefix + key, JSON.stringify(record));
        return true;
      } catch {
        return false;                    // quota exceeded or storage blocked
      }
    },
    get(key, fallback = null) {
      try {
        const record = JSON.parse(storage.getItem(prefix + key));
        if (!record) return fallback;
        if (record.expires && Date.now() > record.expires) {
          storage.removeItem(prefix + key);
          return fallback;
        }
        return record.value;
      } catch {
        return fallback;
      }
    },
  };
}

// In-memory stand-in with the same API as localStorage
const memory = new Map();
const fakeStorage = {
  getItem: (k) => memory.get(k) ?? null,
  setItem: (k, v) => memory.set(k, String(v)),
  removeItem: (k) => memory.delete(k),
};

const store = createStore(fakeStorage);
store.set("prefs", { theme: "dark", fontSize: 18 });
store.set("otp-sent", true, 50);                 // expires in 50 ms
fakeStorage.setItem("lf:broken", "{not json");

console.log(store.get("prefs"));
console.log(store.get("otp-sent"));
await new Promise((r) => setTimeout(r, 80));
console.log(store.get("otp-sent", false));       // expired
console.log(store.get("broken", "default"));     // corrupted → fallback
console.log([...memory.keys()]);

{ theme: 'dark', fontSize: 18 }
true
false
default
[ 'lf:prefs', 'lf:broken' ]

In the browser: const store = createStore(localStorage);

Syncing between tabs

// Fires in OTHER tabs of the same site when localStorage changes
window.addEventListener("storage", (event) => {
  if (event.key === "lf:prefs") applyTheme(JSON.parse(event.newValue).value.theme);
});

Cookies

Cookies are small strings that the browser sends to the server with every request to that site. That makes them the right tool for server sessions – and the wrong tool for general client-side storage.

// Set a cookie from JavaScript (non-sensitive values only)
document.cookie = "lang=en; Max-Age=31536000; Path=/; SameSite=Lax; Secure";

// Read: document.cookie is one string "a=1; lang=en"
const cookies = Object.fromEntries(
  document.cookie.split("; ").filter(Boolean).map((c) => c.split("=").map(decodeURIComponent))
);
console.log(cookies.lang);

// Delete: set it again with Max-Age=0
document.cookie = "lang=; Max-Age=0; Path=/";

IndexedDB in one paragraph

For large or structured data – offline notes, cached API results, files – use IndexedDB: an asynchronous, transactional database in the browser. Its raw API is verbose, so most developers use a small wrapper library such as idb or Dexie.

Practice

Summary