localStorage vs. Cookies — When to Use Each for Front-End State

Both localStorage and cookies let you remember things in the browser. They solve overlapping problems, but each one shines in a different scenario. Here’s a concise guide, plus a real example from an “on-boarding” tooltip that only shows the first time you visit a page.

Where localStorage Wins

• Purely client-side state — UI prefs, dismiss-once hints, dark-mode toggle, cached API responses, etc.
• Large quota — ~5–10 MB per origin (varies by browser).
• Zero network overhead — never sent with HTTP requests.
• Simple API — key/value strings: setItem(), getItem(), removeItem().

// one-time tooltip flag
localStorage.setItem('hasSeenTooltip', 'true');

if (!localStorage.getItem('hasSeenTooltip')) {
  showTooltip();
}

Where Cookies Still Shine

• Server needs to know — session IDs, auth tokens, AB-test buckets, feature flags.
• Automatic expiry — Max-Age/Expires baked in.
• Security attributes — Secure, HttpOnly, SameSite.
• Works with SSR & legacy stacks.

// 7-day “remember me” session cookie
document.cookie = [
  'session=abc123',
  'Max-Age=' + 60*60*24*7, // seconds
  'Path=/',
  'Secure',
  'SameSite=Strict'
].join('; ');

Real-world Example — “Show Once” Dashboard Tooltip

Goal: Display a help tooltip the very first time a user lands on “My Dashboard” (MDT) — never again, even if they sign out and back in on the same device.

Requirement	Why localStorage
Must survive reloads on this computer	Data stays until manually cleared
No need for the server to know	Keep network traffic lean
Okay if the user sees the tooltip again on a different device	Storage is per-origin, per-browser

// dashboardTooltip.js
export function shouldShowDashboardTip() {
  /* returns true once, then never again on this device */
  const KEY = 'mdtFirstVisit';
  const firstTime = localStorage.getItem(KEY) !== 'done';
  if (firstTime) localStorage.setItem(KEY, 'done');
  return firstTime;
}

Quick Reference

	localStorage	Cookie
Quota (per origin)	~5–10 MB	~4 KB per cookie
Sent with every request	No	Yes
Expires automatically	No	Yes (Expires/Max-Age)
Secure / HttpOnly flags	—	Yes
Accessible to JS	Yes	Only if not HttpOnly
Ideal for…	UI prefs, cache, “don’t show again” flags	Auth, CSRF tokens, feature gates

Take-away

• localStorage → purely client-side preferences or cache, never leaves the browser, larger quota, easy to tamper with, cleared per-origin.
• Cookies → any value that the server must see or enforce (auth, tracking, feature flags, short-lived state), with secure/expiry options baked in.