Lesson 0006 · ~12 minutes · synthesis

Ship the decision, not the buzzword

One skill: given a feature brief, write a complete client-storage choice — store, schema shape, runtime discipline, and one risk you own.

Mission payoff

This is the durable skill from MISSION.md: defend a browser storage choice in a design review without hand-waving.

Lesson-only path

You can complete this from lessons 1–5 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-derive is cheap. Web Storage only for tiny strings. Cache API for HTTP assets. OPFS for file-shaped bytes. IndexedDB for durable structured app data. Server remains multi-device truth. (Lessons 1, 5)

Gate B · Shape

DB name + version; object stores; in-line / out-of-line / autoIncrement keys; indexes only for planned lookups (upgrade-time schema). Version bump = deploy + multi-tab dance. (Lessons 2, 4)

Gate C · Runtime

Scoped transactions; readonly by default; put vs add; no unrelated await mid-tx; getAll for modest sets, cursors for large streams; “saved” ≈ transaction complete. (Lessons 3, 4)

Gate D · Ship risks

Quota/eviction (not forever); re-hydrate path; multi-tab writers + upgrades; sync/conflict policy if multi-device; main-thread cost. (Lesson 5)

Sentence you should be able to say

“We use memory | Web Storage | Cache | OPFS | IndexedDB | server because job class; schema is stores/keys/indexes + version plan; runtime is tx mode + query shape; we own eviction / multi-tab / sync risk.”

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

2. Practice — full briefs

Pick the best default package. Equal-length options.

Brief A · Offline note drafts

Notes app: users edit multi-KB rich drafts offline, search by project, reopen days later on the same browser. Server sync exists but may lag. Same origin SPA.

Brief B · Offline app shell

PWA must load HTML/JS/CSS offline on next visit. No structured entity cache in this brief — just the shell and static assets.

Brief C · Local analytics cache

Origin holds hundreds of thousands of event objects in IDB. UI shows one calendar day. Team proposed getAll() on the entire store each chart render, then filter in JS.

Brief D · Schema rename ship

v3 adds indexes and renames a store. Users leave tabs open for days. Design review asks “what ships with the release?”

Brief E · Two phones, one draft

Same account, phone A and phone B both edit offline, then both come online. Product needs a single merged document.

Brief F · Theme preference

Remember light/dark theme across visits. One string. No offline entity graph. Main thread only.

3. What to remember

Ask your teacher Paste a real feature brief and we can run the four gates on it live.