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');

Trade-offs

Option	Benefit	Cost
`JSON.stringify`/`JSON.parse`	Handles deeply nested objects and arrays fully, same pattern everywhere	Must re-parse on every read, costing more CPU as data grows
Storing a raw string (no stringify)	Faster, no serialization overhead	Always comes back the wrong type (numbers/booleans become strings), and objects become `"[object Object]"`
Typed `storageGet`/`storageSet` helpers	Shorter call sites, built-in `try/catch` guards against corrupt data	Adds a small extra layer the team needs to know about and maintain

Common mistakes

Passing an object straight into setItem without stringifying it — you get "[object Object]" back. Always JSON.stringify before writing.
Calling JSON.parse without a try/catch — if the stored value isn’t valid JSON (hand-edited in DevTools, or left over from an old code version), the app crashes immediately.
Expecting a Date to come back as a Date object after parsing — JSON.stringify always converts a Date to an ISO string. You must call new Date(str) yourself to restore the original type.