Web Storage: localStorage and sessionStorage

Browsers give JavaScript two simple key-value storage mechanisms that persist data on the user's machine without needing a server: localStorage and sessionStorage. Both share the same API, but they differ in how long data survives.

These APIs only store strings, so storing structured data (objects, arrays) requires manual serialization with JSON.stringify() and deserialization with JSON.parse().

Why it matters

A dark-mode choice, a shopping cart or a half-written form should survive a page reload. localStorage keeps small pieces of data in the browser with a very simple API. Its two traps are that it stores only strings, and that it is never the place for anything secret.

localStorage vs sessionStorage

localStorage persists data with no expiration date — it survives page reloads, browser restarts, and even system reboots, until explicitly cleared by code or the user. sessionStorage persists only for the duration of the page session — it's cleared automatically when the tab is closed (but survives a page reload within the same tab). Both are scoped per-origin (protocol + domain + port), so one site cannot read another site's storage.

The Core API

Both objects expose the same four methods, plus a length property.

• setItem(key, value) — stores a value under a key (value is coerced to a string).
• getItem(key) — retrieves the stored string, or null if the key doesn't exist.
• removeItem(key) — deletes a single key.
• clear() — removes everything stored for that origin.

Storing Objects with JSON

Because storage only holds strings, storing an object directly (localStorage.setItem('user', userObj)) will store the literal text "[object Object]" instead of the data. The correct pattern is to serialize before storing and parse after reading, and to guard against missing keys or malformed JSON.

Examples

localStorage.setItem('theme', 'dark');

const savedTheme = localStorage.getItem('theme');
console.log(savedTheme);

localStorage.removeItem('theme');
console.log(localStorage.getItem('theme'));

dark
null

const user = { name: 'Asha', age: 28, roles: ['admin', 'editor'] };

localStorage.setItem('user', JSON.stringify(user));

const raw = localStorage.getItem('user');
const restoredUser = raw ? JSON.parse(raw) : null;

console.log(restoredUser.name, restoredUser.roles.join(', '));

Asha admin, editor

Exercise

The playground preview does not allow real storage, so a stand-in object with the same getItem and setItem methods is provided; the code is identical with localStorage. Write savePrefs, which stores an object under the key prefs, and loadPrefs, which returns the stored object, or { theme: "light" } when nothing is stored.

Expected output: light, dark, string (one per line)

// Stand-in for localStorage, with the same two methods
const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
};

function savePrefs(prefs) {
  // TODO: store the object as JSON under the key "prefs"
}

function loadPrefs() {
  // TODO: return the stored object, or { theme: "light" } if there is none
}

console.log(loadPrefs().theme);
savePrefs({ theme: "dark" });
console.log(loadPrefs().theme);
console.log(typeof storage.getItem("prefs"));

// Stand-in for localStorage, with the same two methods
const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
};

function savePrefs(prefs) {
  storage.setItem("prefs", JSON.stringify(prefs));
}

function loadPrefs() {
  const raw = storage.getItem("prefs");
  return raw ? JSON.parse(raw) : { theme: "light" };
}

console.log(loadPrefs().theme);
savePrefs({ theme: "dark" });
console.log(loadPrefs().theme);
console.log(typeof storage.getItem("prefs"));

Quick quiz

Interview questions