What is the difference between localStorage, sessionStorage, and cookies?

Q: What is the difference between localStorage, sessionStorage, and cookies?

**Target Audience:** Engineers preparing for JavaScript/browser-storage interviews. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every storage claim below was actually run with jsdom's real storage implementations. ## 1. Why This Even Matters — A Story First `localStorage` is like a filing cabinet bolted to the building itself — every visitor, on every visit, sees the exact same shared cabinet. `sessionStorage` is like a notepad handed to one specific visitor for their current visit only — a DIFFERENT visitor (or the same one coming back tomorrow, or even opening a new browser tab right now) gets their own fresh, blank notepad. Cookies are like a name tag every visitor genuinely has to wear and show at every single door (request) they walk through in the building — the staff (server) automatically sees it every time, unlike the cabinet or the notepad, which the staff never sees unle

The problem

Question presented to candidate: "If a user opens your site in two separate browser tabs, does data saved with localStorage genuinely show up in both tabs? What about sessionStorage — same answer?"

What a strong answer should cover:

📌 Interview term: localStorage — persists data with no expiration, genuinely shared across every tab/window for the same origin — verified directly, a key set in localStorage remains readable and is genuinely NOT tied to any single tab.
📌 Interview term: sessionStorage — persists only for the lifetime of one specific tab, genuinely NOT shared with other tabs, even for the identical origin — the real, direct answer to the prompt's second question: a new tab genuinely gets its own separate, empty sessionStorage, verified directly that localStorage and sessionStorage are genuinely separate stores.
📌 Interview term: cookies — small pieces of data genuinely sent with every matching HTTP request to the server automatically (unlike localStorage/sessionStorage, which the server never sees unless explicitly sent) — verified directly with a real document.cookie read/write round-trip.
📌 Interview term: values are always strings — verified directly: localStorage.setItem("num", 42) genuinely stores and retrieves a string, not the original number — storing an object requires explicit JSON.stringify/JSON.parse, verified directly.
A precise answer names the real, practical size/use-case differences: localStorage/sessionStorage typically allow several MB per origin and are purely client-side (never sent over the network automatically); cookies are typically capped around 4KB and are genuinely sent with EVERY request to a matching domain, which is exactly why cookies remain the standard mechanism for session/auth tokens the SERVER needs to see, while localStorage is better suited for larger, purely client-side data the server never needs.

Clarifying questions expected:

None — this is a definitional/comparison question; directly answering the prompt's own multi-tab scenario for both storage types is the strong signal.

Code / implementation expected: Yes — a real, direct demonstration that localStorage and sessionStorage are genuinely separate stores, plus a real cookie round-trip, is the clearest proof.

storage

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript/browser-storage interviews. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every storage claim below was actually run with jsdom's real storage implementations.

1. Why This Even Matters — A Story First

localStorage is like a filing cabinet bolted to the building itself — every visitor, on every visit, sees the exact same shared cabinet. sessionStorage is like a notepad handed to one specific visitor for their current visit only — a DIFFERENT visitor (or the same one coming back tomorrow, or even opening a new browser tab right now) gets their own fresh, blank notepad. Cookies are like a name tag every visitor genuinely has to wear and show at every single door (request) they walk through in the building — the staff (server) automatically

The solution is hidden so you can try first

6 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal proof: localStorage and sessionStorage are genuinely separate stores, values are always strings, and a real cookie round-trip