fix: synchronize localStorage clear events across tabs

packages/reflex-base/news/+sync-local-storage-clear.bugfix.md

@@ -0,0 +1 @@
+Synchronize configured local storage state across tabs when localStorage is cleared.

packages/reflex-base/src/reflex_base/.templates/web/utils/state.js

@@ -1610,14 +1610,24 @@ export const useEventLoop = (
 
     // e is StorageEvent
     const handleStorage = (e) => {
-      const state_keys = storage_to_state_map.get(e.key);
       // Session storage changes in same-origin frames raise storage events too.
-      if (state_keys && e.storageArea === localStorage) {
-        // The value is read when the event is sent: see syncLocalStorageEvent.
-        addEvents(
-          [ReflexEvent(SYNC_LOCAL_STORAGE, { key: e.key, state_keys })],
-          e,
-        );
+      if (e.storageArea !== localStorage) {
+        return;
+      }
+      // A clear() event has no key and affects every synced storage name.
+      const entries =
+        e.key === null
+          ? storage_to_state_map.entries()
+          : [[e.key, storage_to_state_map.get(e.key)]];
+      const events = [];
+      for (const [key, state_keys] of entries) {
+        if (state_keys) {
+          // Read the value when sent, just like individual-key updates.
+          events.push(ReflexEvent(SYNC_LOCAL_STORAGE, { key, state_keys }));
+        }
+      }
+      if (events.length) {
+        addEvents(events, e);
       }
     };
 

tests/units/compiler/state_js.test.mjs

@@ -724,3 +724,57 @@ test("storage names that are Object.prototype properties sync like any other", a
     JSON.stringify({ third: null }),
   );
 });
+
+test("clearing localStorage syncs every configured name but not unsynced vars", async () => {
+  const { harness, effects, sent } = await mountEventLoop({
+    local_storage: {
+      first: { name: "shared", sync: true },
+      second: { name: "shared", sync: true },
+      other: { sync: true },
+      unsynced: { name: "shared" },
+    },
+  });
+  effects.forEach((effect) => effect());
+  const event = new Event("storage");
+  event.key = null;
+  event.storageArea = harness.localStorage;
+  harness.window.dispatchEvent(event);
+  await new Promise((resolve) => setImmediate(resolve));
+  const updates = sent.filter((event) =>
+    event.name.endsWith("update_vars_internal"),
+  );
+  assert.equal(updates.length, 2, JSON.stringify(sent));
+  assert.equal(
+    JSON.stringify(updates[0].payload.vars),
+    JSON.stringify({ first: null, second: null }),
+  );
+  assert.equal(
+    JSON.stringify(updates[1].payload.vars),
+    JSON.stringify({ other: null }),
+  );
+});
+
+test("a sessionStorage clear does not sync localStorage vars", async () => {
+  const { harness, effects, sent } = await mountEventLoop({
+    local_storage: { first: { sync: true } },
+  });
+  effects.forEach((effect) => effect());
+  const event = new Event("storage");
+  event.key = null;
+  event.storageArea = harness.window.sessionStorage;
+  harness.window.dispatchEvent(event);
+  assert.equal(sent.length, 0);
+});
+
+test("clearing localStorage without synced vars queues no updates", async () => {
+  const { harness, effects, sent } = await mountEventLoop({
+    local_storage: { unsynced: { name: "unused" } },
+  });
+  for (const effect of effects) effect();
+  const event = new Event("storage");
+  event.key = null;
+  event.storageArea = harness.localStorage;
+  harness.window.dispatchEvent(event);
+  await new Promise((resolve) => setImmediate(resolve));
+  assert.equal(sent.length, 0);
+});