Local Storage in JavaScript

Introduction

Browsers offer localStorage and sessionStorage to persist small string key-value data on the client. You often store UI preferences or draft form data—paired with JSON for objects. This chapter covers limits, API usage, and safe patterns.

Prerequisites

localStorage Basics

javascript
// Only stores strings
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));
 
localStorage.removeItem("theme");
localStorage.clear();

Data survives tab close and browser restart (same origin).

sessionStorage

Same API but cleared when the tab session ends:

javascript
sessionStorage.setItem("step", "2");
console.log(sessionStorage.getItem("step"));

Store Objects as JSON

javascript
// Serialize before save
const cart = { items: [{ sku: "A1", qty: 1 }], updatedAt: Date.now() };
localStorage.setItem("cart", JSON.stringify(cart));
 
// Parse after load
const raw = localStorage.getItem("cart");
const restored = raw ? JSON.parse(raw) : { items: [] };
console.log(restored.items.length);

Wrap JSON.parse in try/catch for corrupted data.

Storage Event (Other Tabs)

javascript
// Fires in other tabs when storage changes
window.addEventListener("storage", (event) => {
  console.log(event.key, event.newValue);
});

Same-tab writes do not fire storage on the writing tab.

Limits and Privacy

  • Roughly 5 MB per origin (browser-dependent)
  • Not encrypted—do not store passwords or tokens long-term
  • Users can clear storage; treat as best-effort cache

Tip

Best Practice

Store non-sensitive preferences only. Use httpOnly cookies or server sessions for auth.

Mini Example: Remember Theme

html
<button id="toggle">Toggle theme</button>
<script>
  const KEY = "theme";
  const root = document.documentElement;
 
  const saved = localStorage.getItem(KEY);
  if (saved) root.dataset.theme = saved;
 
  document.getElementById("toggle").addEventListener("click", () => {
    const next = root.dataset.theme === "dark" ? "light" : "dark";
    root.dataset.theme = next;
    localStorage.setItem(KEY, next);
    console.log("theme:", next);
  });
</script>

FAQ

localStorage vs cookies?

Cookies go to server on each request; localStorage stays in the browser until cleared.

Sync API block UI?

Calls are synchronous and fast for small data—still avoid huge JSON blobs.

Private / incognito mode?

May quota or clear on exit—handle missing storage gracefully.

What comes next?

Node.js overview.