Making the browser remember: localStorage

Values in variables vanish when the page reloads. Browsers come with a notepad that survives closing the page, and it’s called localStorage. It suits things worth remembering: a dark mode preference, a high score.

Three operations to learn

localStorage.setItem("name", "Shima");        // save
const name = localStorage.getItem("name");    // read
localStorage.removeItem("name");              // delete

The "name" part is the key—a label, like an object’s key, that you choose yourself.

Check whether something was saved

When nothing was saved, getItem returns null, the “nothing here” marker. Checking after reading is the standard shape.

const saved = localStorage.getItem("name");

if (saved === null) {
  console.log("Nothing saved yet");
} else {
  console.log("Last time it was " + saved);
}

Run this when the page opens and you have a page that picks up where it left off.

Only text fits

localStorage holds text and nothing else. This is where people trip.

localStorage.setItem("score", 100);
const score = localStorage.getItem("score");
console.log(score + 1);   // "1001"

To use it as a number, convert after reading:

const score = Number(localStorage.getItem("score"));
console.log(score + 1);   // 101

For arrays and objects, turn them into text first:

const likes = ["drawing", "ramen"];

localStorage.setItem("likes", JSON.stringify(likes));      // to text, then save
const saved = JSON.parse(localStorage.getItem("likes"));   // back to the original

console.log(saved[0]);

• JSON.stringify() — turns arrays and objects into text
• JSON.parse() — turns text back into the original shape

They come as a pair: stringify on the way in, parse on the way out.

A typical use

// Remember the dark mode setting
localStorage.setItem("theme", "dark");

// Restore it next time the page opens
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark");
}

That pattern alone gives you a page people don’t have to configure twice.

Looking at what’s stored

Browser dev tools show you the contents. In Chrome: the Application tab → Local Storage in the left menu. Keys and values appear as a table, and you can delete entries right there.

Handy for confirming that a save you thought worked actually did.

What must never go in it

A few other traits worth knowing:

• Per browser, per device. Chrome and Safari don’t share, and neither do your phone and your laptop
• Per site. Other sites can’t read yours
• Capacity is around 5MB. Plenty for text, wrong for stuffing images into
• “Clear browsing data” wipes it all. Only store things you can afford to lose

Summary of this lesson

1. setItem saves, getItem reads, removeItem deletes—and it survives closing the page
2. Only text fits. Use Number() for numbers, JSON.stringify() and JSON.parse() for arrays and objects
3. Anyone can read it, so never store passwords or personal data