← Docs/Cross-tab form persistence

Cross-tab form persistence

Keep recipe form state alive across browser tabs using BroadcastChannel and localStorage snapshots.

Why it matters

Users often open recipe links in new tabs while editing. Without cross-tab sync, unsaved changes in one tab are invisible to another, leading to lost work or stale previews. Meridian keeps every tab in lockstep.

Architecture

localStorage — canonical snapshot
BroadcastChannel — real‑time sync signal
storage event — fallback for same‑origin windows

Data flow

  1. User types in Tab A — form state serialized to localStorage.
  2. Tab A posts a "sync" message on BroadcastChannel.
  3. Tab B receives the message, reads localStorage, hydrates form.
  4. On tab close, stale snapshots are pruned after a grace period.

Edge cases handled

  • Race between localStorage write and BroadcastChannel delivery.
  • Tab crash recovery — snapshot doubles as draft backup.
  • Incognito / storage‑partitioned browsers fall back to in‑memory only.
  • Large recipe payloads compressed with LZ‑string before storage.

Tip: Combine with Meridian's autosave to get both cross‑tab sync and server‑side draft persistence in one workflow.