Day 15: localStorage, sessionStorage & JSON

// Node.js has no localStorage, so this demo creates a tiny stand-in.
// In the browser, delete these 7 lines – localStorage already exists.
const localStorage = (() => {
  const data = new Map();
  return { getItem: k => (data.has(k) ? data.get(k) : null), setItem: (k, v) => data.set(k, String(v)),
           removeItem: k => data.delete(k), clear: () => data.clear(), get length() { return data.size; },
           key: i => [...data.keys()][i] ?? null };
})();

localStorage.setItem('theme', 'dark');
localStorage.setItem('visits', 3);                 // stored as the STRING "3"
console.log(localStorage.getItem('theme'));
console.log(typeof localStorage.getItem('visits'), Number(localStorage.getItem('visits')) + 1);
console.log(localStorage.getItem('missing'));      // null when not found

localStorage.setItem('cart', { id: 1, qty: 2 });   // ❌ objects become "[object Object]"
console.log(localStorage.getItem('cart'));

localStorage.setItem('cart', JSON.stringify([{ id: 1, qty: 2 }]));   // ✅
const cart = JSON.parse(localStorage.getItem('cart'));
console.log(cart[0].qty, Array.isArray(cart));

localStorage.removeItem('theme');
console.log(localStorage.length, 'keys left');

// Node.js has no localStorage, so this demo creates a tiny stand-in.
// In the browser, delete these 7 lines – localStorage already exists.
const localStorage = (() => {
  const data = new Map();
  return { getItem: k => (data.has(k) ? data.get(k) : null), setItem: (k, v) => data.set(k, String(v)),
           removeItem: k => data.delete(k), clear: () => data.clear(), get length() { return data.size; },
           key: i => [...data.keys()][i] ?? null };
})();

const store = {
  get(key, fallback) {
    try {
      const raw = localStorage.getItem(key);
      return raw === null ? fallback : JSON.parse(raw);
    } catch (err) {
      return fallback;                        // corrupted JSON or storage blocked
    }
  },
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch (err) {
      return false;                           // quota full or blocked
    }
  },
  remove(key) {
    try { localStorage.removeItem(key); } catch (err) { /* ignore */ }
  },
};

store.set('ss-cart', { version: 2, items: [{ id: 1, qty: 2 }, { id: 4, qty: 1 }] });
console.log(store.get('ss-cart', { version: 2, items: [] }).items.length, 'items');
console.log(store.get('ss-theme', 'light'));            // default when missing
localStorage.setItem('broken', '{not json');
console.log(store.get('broken', 'safe default'));

// Node.js has no localStorage, so this demo creates a tiny stand-in.
// In the browser, delete these 7 lines – localStorage already exists.
const localStorage = (() => {
  const data = new Map();
  return { getItem: k => (data.has(k) ? data.get(k) : null), setItem: (k, v) => data.set(k, String(v)),
           removeItem: k => data.delete(k), clear: () => data.clear(), get length() { return data.size; },
           key: i => [...data.keys()][i] ?? null };
})();

// Old site (v1) saved: { "1": 2, "4": 1 }  (id → qty)
localStorage.setItem('ss-cart', JSON.stringify({ 1: 2, 4: 1 }));

function loadCart() {
  let saved;
  try { saved = JSON.parse(localStorage.getItem('ss-cart')); } catch (e) { saved = null; }
  if (!saved) return { version: 2, items: [] };
  if (saved.version === 2) return saved;
  // migrate v1 → v2 so returning customers keep their cart
  const items = Object.entries(saved).map(([id, qty]) => ({ id: Number(id), qty }));
  const migrated = { version: 2, items };
  localStorage.setItem('ss-cart', JSON.stringify(migrated));
  return migrated;
}
console.log(JSON.stringify(loadCart()));

<button id="theme">🌓 Toggle theme</button>
<p><label for="msg">Message for Sharma Sweets</label><br>
<textarea id="msg" rows="3" cols="40" placeholder="Type – it is saved as you go"></textarea></p>
<p id="status" role="status"></p>

<script>
// safe helpers (same as above, shortened)
const store = {
  get(k, d) { try { const r = localStorage.getItem(k); return r === null ? d : JSON.parse(r); } catch (e) { return d; } },
  set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); return true; } catch (e) { return false; } },
};
const status = document.querySelector('#status');

// theme
let theme = store.get('ss-theme', 'light');
const apply = () => { document.body.style.background = theme === 'dark' ? '#111827' : '#fff'; document.body.style.color = theme === 'dark' ? '#e5e7eb' : '#111827'; };
apply();
document.querySelector('#theme').addEventListener('click', () => {
  theme = theme === 'dark' ? 'light' : 'dark';
  const saved = store.set('ss-theme', theme);
  apply();
  status.textContent = saved ? 'Theme saved ✅' : 'Theme changed (saving is blocked in this preview – works on a real page)';
});

// draft autosave
const msg = document.querySelector('#msg');
msg.value = store.get('ss-draft', '');
msg.addEventListener('input', () => {
  const ok = store.set('ss-draft', msg.value);
  status.textContent = ok ? 'Draft saved ✓' : 'Draft kept in memory only (storage blocked here)';
});
</script>

// Fires in OTHER tabs of the same site when localStorage changes
window.addEventListener('storage', (e) => {
  if (e.key === 'ss-cart') {
    cart = JSON.parse(e.newValue || '{"version":2,"items":[]}');
    renderCartBadge();          // the cart count updates in every open tab
  }
});