What Is Local Storage?

Normally, a JavaScript variable exists only while the page is running. When the page reloads, that variable is recreated, and its previous value is lost.

localStorage is a browser feature that allows websites to store small amounts of information as key-value pairs. Unlike ordinary JavaScript variables, stored values can survive page refreshes and browser restarts.

localStorage.setItem("favoriteColor", "cyan");

This creates an entry with the key favoriteColor and the value cyan.

Use setItem() to Remember Information

The setItem() method accepts two arguments: the name of the key and the value to save.

localStorage.setItem("username", "Alex");
localStorage.setItem("theme", "dark");
localStorage.setItem("lastLesson", "16");

If the key already exists, calling setItem() again replaces its previous value.

localStorage.setItem("theme", "light");

Storage values are strings. Even when you save a number, it will be retrieved as text.

Use getItem() to Read Saved Values

Use getItem() to retrieve information by its key.

const username = localStorage.getItem("username");

console.log(username); // "Alex"

If a key does not exist, getItem() returns null.

const savedTheme = localStorage.getItem("theme");

const theme = savedTheme ?? "light";

console.log(theme);

The ?? operator supplies a fallback when the saved value is null or undefined.

Delete Individual Items or Clear Storage

To delete one stored entry, use removeItem().

localStorage.removeItem("theme");

You can also use clear() to remove every localStorage entry belonging to the current origin.

// Caution: removes all localStorage entries
// belonging to this website's origin.
localStorage.clear();

For most applications, remove only your application’s keys. Calling clear() on a shared website could erase unrelated preferences, saved notes, or learning progress.

Combine Local Storage With JSON

localStorage stores strings, not JavaScript objects directly. To save an array or object, first convert it into a JSON string.

const notes = [
  { title: "JavaScript", text: "Practice every day." },
  { title: "Project", text: "Build a dashboard." }
];

localStorage.setItem(
  "myNotes",
  JSON.stringify(notes)
);

To retrieve the array, use JSON.parse().

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

const notes = saved ? JSON.parse(saved) : [];

console.log(notes[0].title); // JavaScript

For production code, handle malformed JSON using try...catch, since stored data might have been modified or become incompatible with a newer version of your application.

Know What Local Storage Can—and Cannot—Do

localStorage is useful for small, non-sensitive pieces of information such as interface preferences, drafts, and learning progress. But it isn’t a database replacement or a secure place for private data.

• It is generally limited to a relatively small amount of data per origin.
• Its methods are synchronous, so large operations can affect page responsiveness.
• Users can delete saved information through browser settings.
• Storage may be unavailable in some private or restricted browsing contexts.
• Scripts running on the same origin can read its contents.

try {
  localStorage.setItem("draft", "My first note");
  console.log("Saved!");
} catch (error) {
  console.log("Browser storage is unavailable.");
}

Try the Live Browser Memory Demo

Enter a short message, save it, and refresh the page. Then retrieve your message to see how the browser remembers it.

Try saving a message, reloading the page, and selecting Retrieve. Delete the message when you’re finished.