Two Tabs, One Draft

A new constraint

Sara opens the exercise twice. In tab A she changes quantity to 2. In tab B she changes the customer. Both click Save. Whose draft should survive?

Our first version has one shared key, so the last successful write wins. That is a limitation to explain, not a conflict-resolution system to pretend we have built.

Decide before implementing

We will show an external-change notice and ask the person to reload the saved draft deliberately. We will not replace active form values while they type. If the current tab has unsaved changes, the notice must say reloading discards them. A second action lets the person keep editing.

The browser's storage event reaches other documents sharing that storage area, not the document that performed the write. Use the event as a notification. On a reload action, call loadDraft again and validate; another write might already have occurred. See MDN's storage event reference.

export function watchDraftChanges(window, onExternalChange) {
  const listener = (event) => {
    if (event.storageArea !== window.localStorage) return;
    if (event.key === 'order-workbench:draft:v1' || event.key === null) {
      onExternalChange();
    }
  };
  window.addEventListener('storage', listener);
  return () => window.removeEventListener('storage', listener);
}

Install this watcher only after successfully acquiring storage, inside your storage-availability guard. The callback updates a notice, not the order. Save its returned cleanup function if the editor can be unmounted.

What a timestamp cannot solve

Adding savedAt helps explain when a save happened. It does not make the read-check-write sequence atomic. Two tabs can both read the same previous value and then overwrite each other. Do not describe this implementation as safe concurrent editing.

For this local exercise, an explicit warning plus the documented last-write limitation is acceptable. Later, a server can check a revision as part of the write itself.

Verify the decision

1. Open two tabs on the same scheme, host and port.
2. Save in A. B should announce the external change; its current fields must remain intact.
3. Make an unsaved edit in B, then choose Reload saved draft. Require an explicit discard decision before replacing it.
4. Clear storage in A. B should receive a notice and handle the missing draft.
5. Navigate away and back within your editor if you implemented mounting: one external write should create one notice, not three.

Review checkpoint

A proposed fix refreshes the page on every storage event. Reject it with an example: a half-entered price in B disappears after A saves. Your deliverable is the two-tab evidence and a short explanation of why a notification is not a lock.