References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript localStorage object

Object JavaScript All modern browsers Updated
Quick answer

The localStorage object stores string key-value pairs in the browser that persist even after the tab or browser is closed. Use localStorage.setItem(key, value) to save, getItem(key) to read, and removeItem(key) to delete. Values are strings, so store objects with JSON.stringify() and read them back with JSON.parse().

Overview

localStorage lets a web page save small amounts of data on the user's device, and it stays there across page reloads and browser restarts until you (or the user) clear it. That makes it ideal for remembering preferences — a theme choice, a dismissed banner, a draft, a small cache. Its near-identical sibling sessionStorage works the same way but is wiped when the tab closes.

The API is four simple methods: setItem(key, value) saves, getItem(key) reads (returning null if the key is missing), removeItem(key) deletes one entry, and clear() wipes everything for that site. Everything is stored as strings, which is the main thing to remember.

Because values are strings, objects and arrays must be serialized: localStorage.setItem("user", JSON.stringify(user)) to save, and JSON.parse(localStorage.getItem("user")) to read — wrap the parse in try...catch in case the stored value is invalid. A few limits matter: storage is capped at roughly 5 MB per origin, access is synchronous (so don't store huge data), and it's readable by any script on the page — so never store secrets or tokens there. For larger or structured data, IndexedDB is the heavier-duty option.

Syntax

localStorage.setItem("theme", "dark");   // save
localStorage.getItem("theme");            // "dark" (or null)
localStorage.removeItem("theme");         // delete one
localStorage.clear();                     // delete all

// objects must be serialized
localStorage.setItem("user", JSON.stringify(user));
const user = JSON.parse(localStorage.getItem("user"));

Example

Live example 
// save a preference that survives reloads
localStorage.setItem('theme', 'dark');

// later, read it back (null if not set)
const theme = localStorage.getItem('theme') || 'light';
document.body.dataset.theme = theme;

// store an object
const settings = { fontSize: 16, sidebar: true };
localStorage.setItem('settings', JSON.stringify(settings));

const saved = JSON.parse(localStorage.getItem('settings'));

Best practices

  • Store objects with JSON.stringify() and read them with JSON.parse() (wrapped in try...catch).
  • Remember getItem() returns null for a missing key — handle that case.
  • Never store passwords, tokens or secrets — any script on the page can read it.
  • Use sessionStorage for data that should vanish when the tab closes; keep entries small (~5 MB cap).

Frequently asked questions

How do I save data in the browser with localStorage?
Use localStorage.setItem(key, value) to save and localStorage.getItem(key) to read it back. The data persists across sessions.
How do I store an object in localStorage?
Serialize it: localStorage.setItem("k", JSON.stringify(obj)), then read with JSON.parse(localStorage.getItem("k")), since storage only holds strings.
What is the difference between localStorage and sessionStorage?
localStorage persists until cleared; sessionStorage is cleared when the tab is closed. Both share the same API.
Is localStorage secure?
No — any JavaScript on the page can read it, and it has no expiry. Never store sensitive data like auth tokens or passwords in it.
JSON Map