Reference · print-friendly

sessionStorage decision playbook

One page for design reviews. Walk top to bottom; stop when a row rejects the current candidate.

← Lesson 4 Integration checklist API sheet Glossary

1. Gate A · Job (which store?)

If…	Prefer…
Re-fetch is cheap; no session continuity	Memory only
Small string/JSON; this tab only; die on close OK; isolation is a feature	sessionStorage
Tiny string; survive restart; share all tabs	`localStorage` (sparingly)
Auth cookies / must travel with HTTP	Cookies (careful) — not Web Storage as a vault
Durable structured app data	IndexedDB
HTTP assets / app shell	Cache Storage (+ SW)
File-shaped bytes	OPFS
Multi-tab live sync of one key	`BroadcastChannel` / `localStorage` events / server — not sessionStorage

2. Gate B · Shape (if Web Storage)

Methods only: getItem / setItem / removeItem / clear
Strings only → JSON.stringify / parse; null-guard missing keys
Keep payloads small; no bulk entity dumps
Prefer method API over property assignment (prototype / built-in collisions)

3. Gate C · Lifetime & isolation

sessionStorage: origin + tab; survives reload; cleared when tab closes
Same-origin iframes in the tab share it; other tabs do not
storage events: other documents only; session does not cross tabs
window.open: initial copy of opener’s session map, then diverges — not a live channel
localStorage: origin-wide, durable, cross-tab events — different job

4. Gate D · Ship risks

Probe availability (storageAvailable); catch write errors
QuotaExceededError / disabled storage (cookie policy)
Sync main-thread — debounce; no hot-path thrash
No secrets / long-lived tokens (XSS-readable)
No workers/service workers — Window-only API
~5 MB practical class — not a database

Sentence to say in review

“We use sessionStorage | localStorage | memory | IDB | … because job + lifetime; shape is methods + JSON; isolation is tab-only / cross-tab; we own probe · quota · no secrets · no multi-tab bus.”