[FIX]: #1529 Watch Local Storage Values

iamfaran · iamfaran · commit 4dde035040ca · 2025-04-24T00:14:00.000+05:00
diff --git a/client/packages/lowcoder/src/comps/hooks/localStorageComp.ts b/client/packages/lowcoder/src/comps/hooks/localStorageComp.ts
@@ -13,21 +13,29 @@ const APP_STORE_NAMESPACE = "lowcoder_app_local_storage";
 const LocalStorageCompBase = withViewFn(
   simpleMultiComp({ values: stateComp<JSONObject>({}) }),
   (comp) => {
-    const originStore = localStorage.getItem(APP_STORE_NAMESPACE) || "{}";
-    let parseStore = {};
-    try {
-      parseStore = JSON.parse(originStore);
-    } catch (e) {
-      log.error("application local storage invalid");
-    }
-
+    // add custom event listener to update values reactively
     useEffect(() => {
-      const value = comp.children.values.value;
-      if (!isEqual(value, parseStore)) {
-        log.info(value, parseStore);
-        comp.children.values.dispatchChangeValueAction(parseStore);
-      }
-    }, [parseStore]);
+      const handler = () => {
+        try {
+          const raw = localStorage.getItem(APP_STORE_NAMESPACE) || "{}";
+          const parsed = JSON.parse(raw);
+          console.log("[LocalStorageComp] Custom event received:", parsed);
+          comp.children.values.dispatchChangeValueAction(parsed);
+        } catch (e) {
+          log.error("Failed to parse localStorage:", e);
+        }
+      };
+
+      // Add listener on mount
+      window.addEventListener("lowcoder-localstorage-updated", handler);
+
+      // Run once on mount to initialize
+      handler();
+
+      return () => {
+        window.removeEventListener("lowcoder-localstorage-updated", handler);
+      };
+    }, []);
 
     return null;
   }
@@ -62,6 +70,8 @@ LocalStorageComp = withMethodExposing(LocalStorageComp, [
           parseStore[key] = value;
           localStorage.setItem(APP_STORE_NAMESPACE, JSON.stringify(parseStore));
           comp.children.values.dispatchChangeValueAction(parseStore);
+
+          window.dispatchEvent(new CustomEvent("lowcoder-localstorage-updated"));
         } catch (e) {
           localStorage.setItem(APP_STORE_NAMESPACE, "{}");
         }
@@ -83,6 +93,9 @@ LocalStorageComp = withMethodExposing(LocalStorageComp, [
           delete parseStore[key];
           localStorage.setItem(APP_STORE_NAMESPACE, JSON.stringify(parseStore));
           comp.children.values.dispatchChangeValueAction(parseStore);
+
+          //  Trigger update
+          window.dispatchEvent(new CustomEvent("lowcoder-localstorage-updated"));
         } catch (e) {
           localStorage.setItem(APP_STORE_NAMESPACE, "{}");
         }
@@ -98,6 +111,9 @@ LocalStorageComp = withMethodExposing(LocalStorageComp, [
     execute: (comp) => {
       localStorage.removeItem(APP_STORE_NAMESPACE);
       comp.children.values.dispatchChangeValueAction({});
+
+      // Trigger update
+      window.dispatchEvent(new CustomEvent("lowcoder-localstorage-updated"));
     },
   },
 ]);
