JSON and Objects

Everything is a string

Web Storage only stores strings. If you pass anything else to setItem, the browser converts it to a string silently:

localStorage.setItem('demo:num', 42);
console.log(localStorage.getItem('demo:num')); // "42" — a string, not a number
typeof localStorage.getItem('demo:num');       // "string"

localStorage.setItem('demo:bool', true);
console.log(localStorage.getItem('demo:bool')); // "true" — a string, not a boolean

localStorage.setItem('demo:obj', { key: 'value' });
console.log(localStorage.getItem('demo:obj')); // "[object Object]" — useless!

This means you cannot store objects, arrays, numbers, or booleans directly and expect to read them back in their original type.

Storing objects with JSON.stringify

The standard pattern is to serialise with JSON.stringify on write and deserialise with JSON.parse on read:

const user = { name: 'Ada', age: 36, admin: false };

// Write
localStorage.setItem('demo:user', JSON.stringify(user));

// Read back
const raw = localStorage.getItem('demo:user');
const restored = raw !== null ? JSON.parse(raw) : null;
console.log(restored.name);  // 'Ada'
console.log(restored.age);   // 36  (number, not string)
console.log(restored.admin); // false (boolean, not string)

JSON.stringify handles nested objects, arrays, numbers, booleans, and null. It does not preserve:

undefined values (they are omitted)
Functions (they are omitted)
Date objects (converted to ISO string — new Date(str) to restore)
Map, Set, RegExp, BigInt (not JSON-serialisable without custom replacer)

A tiny typed helper

Rather than repeating the stringify/parse pattern everywhere, a small helper keeps it clean:

function storageGet(key, fallback) {
  try {
    const raw = localStorage.getItem(key);
    return raw !== null ? JSON.parse(raw) : fallback;
  } catch {
    return fallback;  // Guard against corrupt/non-JSON values
  }
}

function storageSet(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

The try/catch around JSON.parse is important: if the stored value was written by old code (plain string), a third-party script, or was manually edited in DevTools, it may not be valid JSON and JSON.parse will throw.

Runnable: objects round-trip

Browser Storage

const settings = { theme: 'dark', fontSize: 16, notifications: true };

// Write as JSON
localStorage.setItem('demo:settings', JSON.stringify(settings));

// Read back and parse
const raw = localStorage.getItem('demo:settings');
const restored = raw !== null ? JSON.parse(raw) : null;

console.log('theme:', restored.theme);            // 'dark' (string)
console.log('fontSize:', restored.fontSize);      // 16 (number)
console.log('notifications:', restored.notifications); // true (boolean)
console.log('types match:', typeof restored.fontSize === 'number'); // true

// Storing a raw number — notice it comes back as string
localStorage.setItem('demo:count', 99);
console.log('raw number type:', typeof localStorage.getItem('demo:count')); // "string"

// Clean up
localStorage.removeItem('demo:settings');
localStorage.removeItem('demo:count');