Session Storage

Diagram#

ISOLATION — per tab, not per origin

  ┌── Tab 1 ──────────────┐  ┌── Tab 2 ──────────────┐
  │ sessionStorage        │  │ sessionStorage        │
  │  draft = {name:"Asha"}│  │  draft = {name:"Ravi"}│
  └───────────────────────┘  └───────────────────────┘
        ▲ independent copies, same origin, no collision

  ┌── Tab 1 ──────────────┐  ┌── Tab 2 ──────────────┐
  │ localStorage: draft ──┼──┼── same single value   │
  └───────────────────────┘  └───────────────────────┘
        ▲ one shared store — the two tabs fight

LIFETIME — what survives what

  action                          sessionStorage   localStorage
  ────────────────────────────────────────────────────────────
  reload (F5)                        ✓ kept           ✓ kept
  navigate away and back             ✓ kept           ✓ kept
  restore tab after crash            ✓ often kept     ✓ kept
  duplicate the tab                  ✓ COPIED         ✓ shared
  close the tab                      ✗ gone           ✓ kept
  open a new tab to the same site    ✗ empty          ✓ kept
  browser restart                    ✗ gone           ✓ kept

How it works#

1. Identical API to localStorage — setItem, getItem, removeItem, clear, strings only, ~5MB.
2. Scope is the tab plus the origin. A duplicated tab starts with a copy, then diverges.
3. The storage event does not fire across tabs, because there's nothing shared to notify about.
4. Survives reloads and in-tab navigation, which makes it right for multi-page flows.

// step 2 of a wizard survives a refresh, but not a new tab
sessionStorage.setItem('claim:draft', JSON.stringify(form));

// on mount
const draft = JSON.parse(sessionStorage.getItem('claim:draft') ?? 'null');

Trade-offs#

A note on tokens: sessionStorage is sometimes recommended for tokens "because it expires". It doesn't expire — it just ends with the tab, and it's equally readable by XSS. The reasoning in 3.5 still applies: prefer HttpOnly cookies.

Interview angle#

"Session storage or local storage for a checkout flow?"

• sessionStorage: the draft is meaningful only for this attempt, and two tabs must not overwrite each other.
• It survives an accidental refresh, which is the actual failure users hit.
• Anything that must outlive the tab — a saved cart — belongs on the server, keyed to the user.

Recap#

• Tab-scoped, origin-scoped, dies on close, copied on tab duplication.
• Right for wizards, drafts, and per-tab UI state.
• No cross-tab storage event, because nothing is shared.