How Do Websites Remember Things?

Have you ever returned to a website and found that it remembered your theme, preferences, or progress? Sometimes that information is stored directly in your browser.

localStorage is part of the Web Storage API. It lets JavaScript save small amounts of data as key-value pairs for a website’s origin.

Unlike ordinary JavaScript variables, stored values can remain available after a page reload or browser restart, until they’re cleared.

Use setItem()

To save a value, use localStorage.setItem() with a key and a value.

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

The key favoriteColor identifies the value. If you save another value using the same key, it replaces the old value.

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

Values are stored as strings. For objects or arrays, you’ll normally use JSON.stringify() before saving them.

Use getItem()

To retrieve a saved value, use localStorage.getItem().

const color = localStorage.getItem("favoriteColor");
console.log(color);

If the key doesn’t exist, getItem() returns null. You can use that to provide a default value.

const color =
  localStorage.getItem("favoriteColor") || "blue";

Delete One Item or Clear Everything

Use removeItem() to delete a particular saved value.

localStorage.removeItem("favoriteColor");

There is also localStorage.clear(), which removes all localStorage entries for the current origin.

Save a Note in Your Browser

Type a short note below, click Save, and refresh this page. Then click Load to retrieve what you saved.

Your note is saved only in this browser’s storage for this website. It isn’t submitted to a server by this example.

Store Arrays and Objects with JSON

Sometimes you want to store more than a simple word or sentence. You might have a list of tasks or several user preferences.

const settings = {
  theme: "dark",
  fontSize: 16
};

localStorage.setItem(
  "mySettings",
  JSON.stringify(settings)
);

const saved = JSON.parse(
  localStorage.getItem("mySettings") || "{}"
);

console.log(saved.theme);

JSON.stringify() converts data into a string, while JSON.parse() converts valid JSON text back into JavaScript data.

Save Responsibly

• Use descriptive, application-specific keys to avoid collisions.
• Store only small amounts of non-sensitive information.
• Don’t assume storage will always be available; browser settings may restrict it.
• Remember that localStorage is synchronous and can block the main thread for large operations.
• Provide an easy way for visitors to remove their saved data.
• Never place passwords, authentication tokens, or confidential information in localStorage.
• Remember that storage belongs to the current origin and browser profile, not automatically to every device.

For larger or more structured offline data, developers often use technologies such as IndexedDB.

Your Website Can Remember!

You’ve learned how to save information in the browser and create more useful interactive applications.

• How localStorage stores key-value pairs.
• How to save, read, update, and remove stored data.
• How to store objects using JSON.
• How to handle missing or unavailable storage.
• How to build a simple persistent notes app.

Next up: Offline Web Apps & Service Workers — discover how modern websites can keep working when the network is unavailable!