Cookies & Local Storage Cheat Sheet

// Set a cookie (document.cookie is a single string interface)document.cookie = "theme=dark; max-age=" + 60 * 60 * 24 * 30 + "; path=/; SameSite=Lax; Secure";// Read all cookies (must parse manually)function getCookie(name) {  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));  return match ? decodeURIComponent(match[2]) : null;}getCookie('theme'); // "dark"// Delete a cookie: set max-age to 0document.cookie = "theme=; max-age=0; path=/";// Server-side (Express) — httpOnly cookies aren't readable by JS at allres.cookie('session_id', token, {  httpOnly: true, secure: true, sameSite: 'strict', maxAge: 3600000,});

// localStorage: persists until explicitly cleared, ~5-10MB per originlocalStorage.setItem('user', JSON.stringify({ id: 1, name: 'Ada' }));const user = JSON.parse(localStorage.getItem('user'));localStorage.removeItem('user');localStorage.clear(); // wipes everything for this origin// sessionStorage: same API, but scoped to a single tab and cleared on tab closesessionStorage.setItem('draft', 'unsaved text');// React to changes from OTHER tabs (storage event doesn't fire in the same tab)window.addEventListener('storage', (event) => {  console.log(event.key, event.oldValue, event.newValue);});

// Chrome/Edge; not yet in Safari/Firefox — feature-detect firstif ('cookieStore' in window) {  await cookieStore.set({    name: 'theme', value: 'dark', expires: Date.now() + 30 * 86400000,    sameSite: 'lax', path: '/',  });  const cookie = await cookieStore.get('theme');  console.log(cookie?.value); // 'dark'  await cookieStore.delete('theme');  // React to changes, including ones made by the server via Set-Cookie  cookieStore.addEventListener('change', (event) => {    event.changed.forEach((c) => console.log('changed:', c.name, c.value));    event.deleted.forEach((c) => console.log('deleted:', c.name));  });}

// Estimate usage across localStorage, IndexedDB, caches, etc. (shared quota per origin)const { usage, quota } = await navigator.storage.estimate();console.log(`Using ${(usage / quota * 100).toFixed(1)}% of available storage`);// Under storage pressure, browsers can evict "best-effort" origin data.// Request persistent storage to opt out of that eviction (may prompt the user):const granted = await navigator.storage.persist();console.log('Persisted:', granted);const alreadyPersisted = await navigator.storage.persisted();

// Unlike the 'storage' event, this doesn't require writing to localStorage// at all, and it fires in EVERY tab including ones opened later while it's active.const channel = new BroadcastChannel('app-sync');channel.postMessage({ type: 'logout' });channel.onmessage = (event) => {  if (event.data.type === 'logout') {    window.location.href = '/login';  }};// Close when the tab/component unmounts to free resourceschannel.close();