JavaScript Storage

A small notebook in the browser

Web Storage saves strings on the visitor’s device, for this site only. There is no server. You call setItem and later getItem. The two stores share the same methods and differ only in how long the data lives.

localStorage lasts until the user or your script clears it.sessionStorage lasts until that tab closes.

localStorage

Keys and values are strings. getItem returns null when the key was never set. That is how you detect a first visit.

<label>Name <input id="name"></label>
<button id="save">Save</button>
<p id="out"></p>
<script>
  const name = document.getElementById("name");
  const save = document.getElementById("save");
  const out = document.getElementById("out");

  const stored = localStorage.getItem("displayName");
  if (stored !== null) {
    name.value = stored;
    out.textContent = "Welcome back, " + stored;
  }

  save.addEventListener("click", function () {
    localStorage.setItem("displayName", name.value);
    out.textContent = "Saved " + name.value;
  });
</script>

Reload the preview after you save. The name should still be there. That is the point oflocalStorage.

sessionStorage

Same API. Different lifetime. Use it for a step in a wizard, a draft that should vanish when the tab closes, or a flag you do not want on the next visit.

<p id="out"></p>
<script>
  const out = document.getElementById("out");
  let n = Number(sessionStorage.getItem("visits") || "0");
  n += 1;
  sessionStorage.setItem("visits", String(n));
  out.textContent = "This tab, this session: " + n;
</script>

Reload the same tab and the count grows. Close the tab and open a new one and it starts again. localStorage would have kept growing across visits.

Always stringify objects

Storage does not keep objects or arrays as objects. If you pass an object tosetItem, it becomes the useless string "[object Object]". CallJSON.stringify when you save and JSON.parse when you load.

<p id="out"></p>
<script>
  const out = document.getElementById("out");
  const task = { title: "Read chapter", done: false };

  localStorage.setItem("task", JSON.stringify(task));

  const raw = localStorage.getItem("task");
  const loaded = JSON.parse(raw);
  out.textContent = loaded.title + " — done: " + loaded.done;
  console.log(typeof raw, typeof loaded);
</script>

Wrap JSON.parse in try / catch if the string might be missing or corrupt. getItem returning null should skip parse entirely.

removeItem and clear

removeItem(key) deletes one key. clear() deletes every key for this origin in that store. Clearing localStorage does not touchsessionStorage.

<button id="forget">Forget name</button>
<p id="out"></p>
<script>
  const forget = document.getElementById("forget");
  const out = document.getElementById("out");
  forget.addEventListener("click", function () {
    localStorage.removeItem("displayName");
    out.textContent = "Name cleared.";
  });
</script>

Which store

Do not store passwords or secrets here. Any script on the page can read the store. Size is limited (often a few megabytes). It is for a name, a theme, a small list — not a database.

What to remember

• localStorage lasts between visits. sessionStorage lasts for the tab.
• Both store strings. setItem / getItem / removeItem.
• Always JSON.stringify objects before you save them.
• getItem is null when the key is missing — check before parse.

Next: fetch — load JSON from a URL, parse it, and handle a failed request.