localStorage and sessionStorage

Web Storage lets a page keep small amounts of data in the visitor’s browser. Two versions exist, and the API is identical.

Each is tied to the origin (protocol + domain + port). https://example.com cannot read the data of https://other.com.

1
2

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // dark

1
2
3
4

// In this editor, storage lives in memory for each run, so it starts empty each time.
// On a normal page, localStorage keeps its data between visits.
localStorage.setItem("visits", "1");
console.log(localStorage.getItem("visits")); // → 1

What it stores

Only strings. Everything you save is converted to text, and you convert it back when you read it.

1
2
3

localStorage.setItem("count", 5);
console.log(typeof localStorage.getItem("count")); // → string
console.log(Number(localStorage.getItem("count")) + 1); // → 6

Objects and arrays need JSON, see JSON with localStorage.

Typical uses

• A chosen theme (light or dark).
• Form drafts, so a refresh does not lose a long text.
• A “seen the welcome message” flag.
• A to-do list in a small app (see the Notes project).

Synchronous

Reading and writing are synchronous, which means they block the page while they run. Fine for small values, but not for large data.

Where to see it

In the browser’s developer tools, open the Application tab (Chrome, Edge) or Storage tab (Firefox) and look under Local Storage. You can view, edit and delete values by hand.