💾 LocalStorage and SessionStorage

What Is Web Storage?

The Web Storage API lets a website save data directly in the visitor's browser as simple key/value pairs. Both keys and values are always strings. It comes in two flavours that share one identical API but differ in how long the data lives:

• localStorage — persists indefinitely. It survives page reloads, tab closes, and even a full browser restart. It only goes away when your code deletes it or the user clears their browser data.
• sessionStorage — lasts only for the lifetime of a single tab. Close the tab and it's gone.

💡 A useful analogy: localStorage is the notebook you keep on your desk — write in it today, and it's still there next week. sessionStorage is a sticky note you scribble during one work session and toss when you get up. Cookies, by contrast, are tiny slips you carry back and forth to the server in your pocket every single trip.

Web Storage sits alongside several other client-side storage mechanisms. Knowing where each fits keeps you from reaching for the wrong one:

Web Storage vs. Cookies

Before Web Storage existed, cookies were the only client-side store. They still have a job — but for most "remember this in the browser" tasks, Web Storage is simpler and faster. Here's the comparison at a glance:

localStorage Fundamentals

The whole API is four methods plus a length property. Both keys and values must be strings — anything else is coerced to a string automatically, which is a common source of bugs.

// Store values (keys and values are strings)
localStorage.setItem('username', 'ray');
localStorage.setItem('darkMode', 'true');   // note: the string "true", not a boolean

// Read a value — returns null if the key does not exist
const name = localStorage.getItem('username');   // 'ray'
const missing = localStorage.getItem('nope');    // null

// A common gotcha: everything comes back as a string
const dark = localStorage.getItem('darkMode');
console.log(dark === true);   // false! it's the STRING 'true'
console.log(dark === 'true'); // true

// Remove one key, or wipe the whole origin's storage
localStorage.removeItem('darkMode');
localStorage.clear();

// Inspect what is stored
console.log(localStorage.length);   // number of keys
console.log(localStorage.key(0));   // the name of the first key

Handling a full quota

If you exceed the ~5 MB budget (or storage is disabled, as in some private-browsing modes), setItem throws a QuotaExceededError. Always wrap writes that could be large:

function safeSet(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (err) {
    if (err.name === 'QuotaExceededError') {
      console.error('Storage is full — clearing old caches.');
      // e.g. evict cached items, then retry, or fall back to memory
    }
    return false;
  }
}

Storing Objects, Arrays & Dates

Because values must be strings, you can't store an object directly — setItem('user', {name:'Ray'}) would save the useless string "[object Object]". The fix is JSON serialization: stringify on the way in, parse on the way out.

const prefs = {
  theme: 'dark',
  fontSize: 16,
  notifications: { email: true, push: false }
};

// Save: object -> JSON string
localStorage.setItem('prefs', JSON.stringify(prefs));

// Load: JSON string -> object (guard against missing/corrupt data)
const raw = localStorage.getItem('prefs');
const restored = raw ? JSON.parse(raw) : null;
console.log(restored?.notifications.email); // true

const activity = { lastLogin: new Date() };
localStorage.setItem('activity', JSON.stringify(activity));

const back = JSON.parse(localStorage.getItem('activity'));
console.log(typeof back.lastLogin);        // 'string' — not a Date!

// Rehydrate it
back.lastLogin = new Date(back.lastLogin);
console.log(back.lastLogin.getFullYear()); // now it's a real Date

For a cleaner, reusable approach, wrap the pattern in a small helper that adds JSON handling, optional expiry, and error safety. Modern codebases build exactly this kind of utility once and reuse it everywhere:

const store = {
  // Save any JSON-serialisable value, with an optional TTL in minutes
  set(key, value, ttlMinutes) {
    const record = { value };
    if (ttlMinutes) record.expiresAt = Date.now() + ttlMinutes * 60_000;
    try {
      localStorage.setItem(key, JSON.stringify(record));
    } catch (err) {
      console.error('store.set failed:', err);
    }
  },

  // Read a value, honouring expiry; returns null if missing or stale
  get(key) {
    const raw = localStorage.getItem(key);
    if (!raw) return null;
    try {
      const record = JSON.parse(raw);
      if (record.expiresAt && Date.now() > record.expiresAt) {
        localStorage.removeItem(key);
        return null;
      }
      return record.value;
    } catch {
      return null; // corrupt JSON — treat as missing
    }
  },

  remove(key) { localStorage.removeItem(key); }
};

store.set('cart', [{ id: 1, qty: 2 }]);   // survives restarts
store.set('token', 'abc', 60);            // auto-expires in 60 minutes
console.log(store.get('cart'));           // [{ id: 1, qty: 2 }]

sessionStorage & Tab Isolation

sessionStorage has the exact same API as localStorage — swap the object name and everything works. The only difference is lifetime and scope: its data belongs to one browsing-context (tab) and vanishes when that tab closes.

// Perfect for one-visit, throwaway state
sessionStorage.setItem('checkoutStep', '2');
sessionStorage.setItem('scrollY', String(window.scrollY));

const step = sessionStorage.getItem('checkoutStep'); // '2'
sessionStorage.clear(); // wiped automatically when the tab closes anyway

This tab-level isolation is a feature, not a limitation. Each tab gets its own private sessionStorage, so two tabs on the same site can run independent multi-step flows without stepping on each other. Meanwhile localStorage is shared across every tab of the origin:

Syncing Tabs with the storage Event

Here's a genuinely useful trick. When localStorage changes in one tab, the browser fires a storage event in every other tab of the same origin. That lets you keep multiple open tabs in sync — flip the theme in one, and the rest follow instantly.

// Runs in OTHER tabs when localStorage changes (never in the tab that wrote it)
window.addEventListener('storage', (event) => {
  console.log('Key changed:', event.key);
  console.log('Old value:', event.oldValue);
  console.log('New value:', event.newValue);

  if (event.key === 'theme') {
    document.body.classList.toggle('dark', event.newValue === 'dark');
  }
});

Security & Privacy

Web Storage is convenient, but it is not a vault. Data is stored unencrypted on disk and is readable by any JavaScript running on your origin. That has direct consequences for what belongs there.

The core threat is XSS (cross-site scripting): if an attacker can inject script into your page, they can read everything in Web Storage. That's why an HttpOnly auth cookie beats a token in localStorage — the cookie is invisible to script. Whatever you do store, clear the sensitive parts on logout:

function logout() {
  // Remove anything tied to the authenticated session
  localStorage.removeItem('authToken');
  localStorage.removeItem('userId');
  sessionStorage.clear();
  // Keep harmless preferences like theme if you like
  window.location.href = '/login.html';
}

Finally, always feature-detect before relying on storage — some enterprise or privacy configurations disable it, and a bare access can throw:

function storageAvailable(type) {
  try {
    const s = window[type];
    const t = '__test__';
    s.setItem(t, t);
    s.removeItem(t);
    return true;
  } catch {
    return false;
  }
}

if (storageAvailable('localStorage')) {
  enablePersistentFeatures();
} else {
  fallBackToInMemoryState();
}

Hands-on Exercise

const KEY = 'prefs';
const themeSel = document.querySelector('#theme');
const sizeInp  = document.querySelector('#size');
const saveBtn  = document.querySelector('#save');

function apply(prefs) {
  document.body.dataset.theme = prefs.theme;
  document.body.style.fontSize = prefs.fontSize + 'px';
  themeSel.value = prefs.theme;
  sizeInp.value = prefs.fontSize;
}

function load() {
  const raw = localStorage.getItem(KEY);
  const prefs = raw ? JSON.parse(raw) : { theme: 'light', fontSize: 16 };
  apply(prefs);
}

saveBtn.addEventListener('click', () => {
  const prefs = { theme: themeSel.value, fontSize: Number(sizeInp.value) };
  localStorage.setItem(KEY, JSON.stringify(prefs));
  apply(prefs);
});

// Stretch: live cross-tab sync
window.addEventListener('storage', (e) => {
  if (e.key === KEY && e.newValue) apply(JSON.parse(e.newValue));
});

load();

Summary & Quiz

📚 Further Reading

• MDN — Web Storage API
• javascript.info — LocalStorage, sessionStorage
• web.dev — Storage for the Web (when to use what)
• MDN — IndexedDB (for larger, structured data)

🚀 What's Next?

Web Storage is just one of dozens of capabilities the browser exposes to JavaScript. Next we'll zoom out and survey the whole landscape of Browser APIs — from geolocation and the camera to background workers — so you know what tools are on the shelf.