JavaScript Web Storage – Storing Data in the Browser

// setItem — store a value (strings only!)
localStorage.setItem('username', 'alice');
localStorage.setItem('theme', 'dark');

// getItem — retrieve (returns null if key doesn't exist)
const username = localStorage.getItem('username');
console.log(username); // "alice"

const missing = localStorage.getItem('nonexistent');
console.log(missing); // null

// removeItem — delete a single key
localStorage.removeItem('theme');

// clear — delete ALL keys in this origin (use with caution!)
// localStorage.clear();

// length — number of stored items
console.log(localStorage.length); // 1

// key(index) — get key name by index (order not guaranteed)
console.log(localStorage.key(0)); // "username"

// Direct property access (works but not recommended — conflicts with built-in props)
localStorage.color = 'blue';  // ❌ avoid
localStorage.setItem('color', 'blue'); // ✅ preferred

// Identical API to localStorage
sessionStorage.setItem('currentStep', '2');
sessionStorage.setItem('formDraft', JSON.stringify({ name: 'Bob', email: 'bob@mail.com' }));

const step = sessionStorage.getItem('currentStep');
console.log(step); // "2"

// Use cases:
// - Wizard/multi-step form progress (lose if user closes tab — by design)
// - Temporary shopping cart (before checkout)
// - One-time messages / alerts per session
// - Protecting against CSRF tokens (very short-lived)

sessionStorage.removeItem('currentStep');
// Cleared automatically when tab closes — no manual cleanup needed

// Store an object
const user = { name: 'Alice', role: 'admin', preferences: { theme: 'dark', lang: 'en' } };
localStorage.setItem('user', JSON.stringify(user));

// Retrieve and parse
const stored = localStorage.getItem('user');
const parsedUser = stored ? JSON.parse(stored) : null;
console.log(parsedUser.preferences.theme); // "dark"

// Store an array
const history = ['home', 'about', 'products'];
localStorage.setItem('navHistory', JSON.stringify(history));
const navHistory = JSON.parse(localStorage.getItem('navHistory') || '[]');
navHistory.push('contact');
localStorage.setItem('navHistory', JSON.stringify(navHistory));

// Helper wrapper to avoid repetition
const store = {
  set(key, val) { localStorage.setItem(key, JSON.stringify(val)); },
  get(key, fallback = null) {
    const item = localStorage.getItem(key);
    return item !== null ? JSON.parse(item) : fallback;
  },
  remove(key) { localStorage.removeItem(key); }
};

store.set('settings', { fontSize: 16, color: '#333' });
const settings = store.get('settings', { fontSize: 14, color: '#000' });

// Listen for changes made in OTHER tabs
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('Origin URL:', event.url);

  // Example: sync theme across tabs
  if (event.key === 'theme') {
    document.body.dataset.theme = event.newValue;
  }

  // Cross-tab logout
  if (event.key === 'auth_token' && event.newValue === null) {
    redirectToLogin();
  }
});

// Note: the storage event does NOT fire in the tab that made the change
// It ONLY fires in other tabs/windows

// Raw IndexedDB API (simplified example)
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('email', 'email', { unique: true });
};

request.onsuccess = (event) => {
  const db = event.target.result;

  // Write a record
  const tx = db.transaction('users', 'readwrite');
  tx.objectStore('users').put({ id: 1, name: 'Alice', email: 'alice@example.com' });
  tx.oncomplete = () => console.log('User saved');
};

// Using Dexie.js (much cleaner):
// const db = new Dexie('myDatabase');
// db.version(1).stores({ users: '++id, name, email' });
// await db.users.add({ name: 'Alice', email: 'alice@example.com' });
// const alice = await db.users.where('email').equals('alice@example.com').first();

// Theme persistence
const themeBtn = document.getElementById('themeToggle');

// Apply saved theme on load
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

themeBtn.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
});

// Persist font size preference
const fontSizeControl = document.getElementById('fontSize');
const savedSize = localStorage.getItem('fontSize') || '16';
document.body.style.fontSize = savedSize + 'px';
fontSizeControl.value = savedSize;

fontSizeControl.addEventListener('input', () => {
  const size = fontSizeControl.value;
  document.body.style.fontSize = size + 'px';
  localStorage.setItem('fontSize', size);
});