feature: useLocalStorage also update when the localStorage has been updated from other window

1 files changed, 29 insertions, 1 deletions

diff --git a/packages/web-util/src/hooks/useLocalStorage.ts b/packages/web-util/src/hooks/useLocalStorage.ts
index ed5b491f2..25df9dfcd 100644
--- a/packages/web-util/src/hooks/useLocalStorage.ts
+++ b/packages/web-util/src/hooks/useLocalStorage.ts
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { StateUpdater, useState } from "preact/hooks";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
 
 export function useLocalStorage(
   key: string,
@@ -33,6 +33,16 @@ export function useLocalStorage(
     },
   );
 
+  useEffect(() => {
+    const listener = buildListenerForKey(key, (newValue) => {
+      setStoredValue(newValue ?? initialValue)
+    })
+    window.addEventListener('storage', listener)
+    return () => {
+      window.removeEventListener('storage', listener)
+    }
+  }, [])
+
   const setValue = (
     value?: string | ((val?: string) => string | undefined),
   ): void => {
@@ -52,6 +62,13 @@ export function useLocalStorage(
   return [storedValue, setValue];
 }
 
+function buildListenerForKey(key: string, onUpdate: (newValue: string | undefined) => void): () => void {
+  return function listenKeyChange() {
+    const value = window.localStorage.getItem(key)
+    onUpdate(value ?? undefined)
+  }
+}
+
 //TODO: merge with the above function
 export function useNotNullLocalStorage(
   key: string,
@@ -63,6 +80,17 @@ export function useNotNullLocalStorage(
       : initialValue;
   });
 
+
+  useEffect(() => {
+    const listener = buildListenerForKey(key, (newValue) => {
+      setStoredValue(newValue ?? initialValue)
+    })
+    window.localStorage.addEventListener('storage', listener)
+    return () => {
+      window.localStorage.removeEventListener('storage', listener)
+    }
+  })
+
   const setValue = (value: string | ((val: string) => string)): void => {
     const valueToStore = value instanceof Function ? value(storedValue) : value;
     setStoredValue(valueToStore);