What you'll be able to do

By the end of this page you should be able to save and load strings with localStorage, know sessionStorage clears with the tab, stringify objects with JSON (post #39), and name when cookies matter without treating them as object storage.

Previous post: data attributes.

Who this is for

  • People who refresh and lose todo state
  • Beginners who stored [object Object] in storage
  • Anyone confusing cookies with localStorage

You can skip this if storage APIs are old hat. Come back when JSON parse errors wipe your settings.

localStorage basics

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // "dark"
localStorage.removeItem("theme");

Scenario A — theme preference survives browser restart.

Scenario B — only strings. Objects need JSON.stringify / JSON.parse with try/catch.

const settings = { fontSize: 16 };
localStorage.setItem("settings", JSON.stringify(settings));
const loaded = JSON.parse(localStorage.getItem("settings") || "{}");

sessionStorage

Same API as localStorage; data scoped to one tab and cleared when tab closes.

Scenario A — wizard step in a demo — ok for session.

Scenario B — long-lived login token — not here (and never secrets in front-end storage for real auth).

localStorage vs sessionStorage (quick)

localStoragesessionStorage
Lifetimeuntil clearedtab session
Shared across tabsyes (same origin)per tab

Cookies (conceptual)

Cookies are small string pairs the browser may send on HTTP requests. Servers set them for sessions, tracking, etc. Size is tiny compared to storage APIs.

Scenario A — “remember me” on classic sites — often cookie + server.

Scenario B — your todo demo — localStorage is simpler; you are not manually setting document.cookie yet.

Do not store large JSON in cookies.

Wrong object storage mistake

localStorage.setItem("user", { name: "Asha" }); // "[object Object]"

Always stringify plain data objects intentionally.

A tiny practice file

Save as storage.html.

<!DOCTYPE html>
<html>
  <body>
    <input id="note" />
    <button id="save">Save</button>
    <pre id="out"></pre>
    <script>
      const key = "draft";
      const input = document.getElementById("note");
      input.value = localStorage.getItem(key) || "";
      document.getElementById("save").addEventListener("click", function () {
        localStorage.setItem(key, input.value);
        document.getElementById("out").textContent = "Saved.";
      });
    </script>
  </body>
</html>

Mistakes I see a lot

1. Storing objects without JSON.

2. No try/catch on parse — corrupt string crashes load.

3. Quota exceeded on huge data — handle or trim.

4. Storing secrets — visible to anyone with DevTools.

5. Using cookies for big client state.

What to try before the next post

  1. Save/load a string across refresh.
  2. Save JSON settings; parse on load.
  3. Compare sessionStorage cleared in new tab.
  4. Build storage.html.

Next in this series: modules in the browser — type="module" and import paths.

Try this next outside the series

Browser JavaScript stops feeling isolated once you connect it to forms and component-oriented UI work.

javascripttutorialsdevelopers