Lesson 0004 · ~12 minutes · synthesis

Ship the decision, not the buzzword

One skill: given a feature brief, write a complete storage choice — store, shape, lifetime/isolation, and one risk you own.

← Lesson 3 Playbook (print) Checklist API sheet Glossary Mission
Mission payoff

This is the durable skill from MISSION.md: defend a sessionStorage choice (or rejection) in a design review without hand-waving.

Lesson-only path

You can complete this from lessons 1–3 alone. External MDN/web.dev reads remain optional enrichment, not a gate.

1. The playbook (four gates)

Run in order. Earlier gates reject more options than later ones.

Gate A · Job

What must live on the client? Memory if re-fetch is fine. sessionStorage for small tab-only session state. localStorage for tiny durable prefs. IndexedDB / Cache / OPFS for their jobs. Never multi-tab bus or secrets. (Lessons 1, 3)

Gate B · Shape

Methods + strings + JSON; null-guard getItem; catch setItem failures. No property-assignment API, no bulk entity dumps. (Lesson 2)

Gate C · Lifetime

Page session: reload OK, tab close clears; origin + tab partition; iframes share, other tabs don’t; storage events don’t cross tabs for session; opener is a one-time copy. (Lessons 1– 2)

Gate D · Ship risks

Probe availability; quota / disabled storage; sync main-thread thrash; no tokens; Window-only (no workers). (Lesson 3)

Sentence you should be able to say

“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.”

Keep the print playbook open after this course — compressed form of all four lessons.

2. Practice — full briefs

Pick the best default package. Equal-length options.

Brief A · Checkout wizard

Four-step checkout. Survive reload in this tab. User may open a second checkout tab that must not overwrite the first flow’s step.

Brief B · Theme preference

Remember light/dark across browser restarts and every open tab. One string; slightly delayed apply is fine.

Brief C · Multi-tab cart badge

Cart count must update in every open tab of the shop when one tab adds an item. Count is a small integer.

Brief D · Offline CRM cache

Cache ~50k contact objects for offline search in any tab; a worker may pre-index. Same-origin SPA.

Brief E · SPA access token

After login, keep a long-lived API access token so Authorization headers work after full page reload.

3. What to remember

Ask your teacher Bring a real feature brief from work — we’ll run the four gates on it. Follow-ups after the quiz are part of closing the mission.

Primary source (optional)

Re-skim web.dev — Storage for the web against this playbook’s Gate A. For lifetime details, MDN sessionStorage.