JavaScript Local Storage – Persisting Data in the Browser

// setItem(key, value) – both key and value must be strings
localStorage.setItem('username', 'Alice');
localStorage.setItem('theme', 'dark');

// getItem(key) – returns string or null (not undefined)
const name = localStorage.getItem('username'); // 'Alice'
const missing = localStorage.getItem('nonexistent'); // null

// removeItem(key) – delete one entry
localStorage.removeItem('username');

// clear() – delete ALL entries for this origin
localStorage.clear();

// length – number of stored keys
console.log(localStorage.length); // 0 (after clear)

// Iterating all entries
localStorage.setItem('a', '1');
localStorage.setItem('b', '2');
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(key, value);
}

// Property-style access (works but not recommended – can shadow API methods)
localStorage.theme = 'light';      // sets 'theme' key
console.log(localStorage.theme);   // 'light'

// Storing an object
const user = { name: 'Alice', role: 'admin', lastLogin: new Date().toISOString() };
localStorage.setItem('user', JSON.stringify(user));

// Reading it back
const stored = localStorage.getItem('user');
const parsedUser = stored ? JSON.parse(stored) : null;
console.log(parsedUser?.name); // 'Alice'

// Helper wrapper for safer access
const storage = {
  get(key, fallback = null) {
    try {
      const item = localStorage.getItem(key);
      return item !== null ? JSON.parse(item) : fallback;
    } catch {
      return fallback;
    }
  },
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch (e) {
      console.warn('localStorage.setItem failed:', e.message);
      return false;
    }
  },
  remove(key) {
    localStorage.removeItem(key);
  }
};

// Usage
storage.set('cartItems', [{ id: 1, qty: 2 }, { id: 3, qty: 1 }]);
const cart = storage.get('cartItems', []);
console.log(cart.length); // 2

// Same API as localStorage
sessionStorage.setItem('formDraft', JSON.stringify({ name: 'Alice', age: '' }));
const draft = JSON.parse(sessionStorage.getItem('formDraft') ?? '{}');

// Use case: save form state while user navigates away and back
function saveFormState(formId) {
  const form = document.getElementById(formId);
  const data = {};
  for (const el of form.elements) {
    if (el.name) data[el.name] = el.value;
  }
  sessionStorage.setItem(`form_${formId}`, JSON.stringify(data));
}

function restoreFormState(formId) {
  const saved = sessionStorage.getItem(`form_${formId}`);
  if (!saved) return;
  const data = JSON.parse(saved);
  const form = document.getElementById(formId);
  for (const [name, value] of Object.entries(data)) {
    const el = form.elements[name];
    if (el) el.value = value;
  }
}

// Tab-specific wizard state
sessionStorage.setItem('wizardStep', '3');
const step = parseInt(sessionStorage.getItem('wizardStep') ?? '1', 10);

// The 'storage' event fires in OTHER tabs (not the one that made the change)
window.addEventListener('storage', (event) => {
  console.log('Key changed:', event.key);
  console.log('Old value:', event.oldValue);
  console.log('New value:', event.newValue);
  console.log('Storage area:', event.storageArea); // localStorage or sessionStorage
  console.log('URL of tab that changed:', event.url);

  // React to theme changes from another tab
  if (event.key === 'theme') {
    applyTheme(event.newValue);
  }

  // React to logout in another tab
  if (event.key === 'user' && event.newValue === null) {
    window.location.href = '/login';
  }
});

// Broadcast a message to all same-origin tabs
function broadcastLogout() {
  localStorage.setItem('logout', Date.now().toString());
  localStorage.removeItem('logout'); // clean up after firing event
}

// Better cross-tab communication: BroadcastChannel API
const channel = new BroadcastChannel('app_updates');
channel.postMessage({ type: 'THEME_CHANGED', theme: 'dark' });
channel.onmessage = (event) => {
  console.log('Message from another tab:', event.data);
};

// 1. Theme preference
function initTheme() {
  const saved = localStorage.getItem('theme') ?? 'light';
  document.documentElement.dataset.theme = saved;
  return saved;
}
function setTheme(theme) {
  localStorage.setItem('theme', theme);
  document.documentElement.dataset.theme = theme;
}

// 2. Shopping cart persistence
class Cart {
  constructor() {
    this.items = storage.get('cart', []);
  }
  add(product) {
    const existing = this.items.find(i => i.id === product.id);
    if (existing) existing.qty++;
    else this.items.push({ ...product, qty: 1 });
    this.save();
  }
  remove(productId) {
    this.items = this.items.filter(i => i.id !== productId);
    this.save();
  }
  get total() {
    return this.items.reduce((sum, i) => sum + i.price * i.qty, 0);
  }
  save() {
    storage.set('cart', this.items);
  }
  clear() {
    this.items = [];
    localStorage.removeItem('cart');
  }
}

// 3. Recently visited pages
function trackVisit(page) {
  const recent = storage.get('recentPages', []);
  const updated = [page, ...recent.filter(p => p !== page)].slice(0, 10);
  storage.set('recentPages', updated);
}
trackVisit('/javascript/intermediate/local-storage.html');

// IndexedDB is an asynchronous, structured database in the browser
// Use it when localStorage's ~5MB or string-only limitation is too restrictive

// Opening a database
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // Create an object store (like a table)
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  // Add a record
  const tx = db.transaction('users', 'readwrite');
  tx.objectStore('users').add({ id: 1, name: 'Alice', age: 28 });
};

// For real projects, use the idb library (a Promise-based wrapper)
// import { openDB } from 'idb';
// const db = await openDB('myDB', 1, { upgrade(db) { db.createObjectStore('kv'); }});
// await db.put('kv', 'hello', 'greeting');
// const value = await db.get('kv', 'greeting'); // 'hello'