Web Storage API

Understand the topic

Web Storage keeps string values for an origin. localStorage can persist across sessions; sessionStorage is scoped to a top-level browsing session. Serialize objects with JSON and handle errors because access can be blocked or storage can be full. Storage is not a database backup or secure vault. Users can clear it, and scripts running in the same origin can read it.

Worked example

try {
  localStorage.setItem("html-study-plan", JSON.stringify({ next: "forms" }));
  const saved = JSON.parse(localStorage.getItem("html-study-plan") || "null");
  console.log(saved?.next);
} catch (error) {
  console.log("Study preference could not be saved.");
}

Try this on your own local course page in developer tools. The isolated live-example iframe has an opaque origin and may reject storage access, so this example is shown as source.

Practice

Remove only the html-study-plan key without erasing other application preferences.

localStorage.removeItem("html-study-plan");

Common mistake

Do not store passwords or assume localStorage.clear only affects your current feature. It clears all storage keys for that origin.

HTML documentation