fix(useStorage): sync within page, close #1595

vueuse · Dec 20, 2022 · 800f74f · 800f74f
1 parent 30a43b2
commit 800f74f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/packages/core/useStorage/demo.vue b/packages/core/useStorage/demo.vue
@@ -2,14 +2,16 @@
 import { stringify } from '@vueuse/docs-utils'
 import { useStorage } from '@vueuse/core'
 
-const state = useStorage('vue-use-local-storage', {
+const theDefault = {
   name: 'Banana',
   color: 'Yellow',
   size: 'Medium',
   count: 0,
-})
+}
+const state = useStorage('vue-use-local-storage', theDefault)
+const state2 = useStorage('vue-use-local-storage', theDefault)
 
-const text = stringify(state)
+const text = stringify(state2)
 </script>
 
 <template>

diff --git a/packages/core/useStorage/index.md b/packages/core/useStorage/index.md
@@ -7,12 +7,12 @@ related: useLocalStorage, useSessionStorage, useStorageAsync
 
 Reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)/[SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)
 
+## Usage
+
 ::: tip
 When using with Nuxt 3, this functions will **NOT** be auto imported in favor of Nitro's built-in [`useStorage()`](https://nitro.unjs.io/guide/introduction/storage). Use explicit import if you want to use the function from VueUse.
 :::
 
-## Usage
-
 ```js
 import { useStorage } from '@vueuse/core'
 

diff --git a/packages/core/useStorage/index.test.ts b/packages/core/useStorage/index.test.ts
@@ -113,7 +113,7 @@ describe('useStorage', () => {
   })
 
   it('remove value', async () => {
-    storage.setItem(KEY, 'null')
+    storage.setItem(KEY, 'random')
 
     const store = useStorage(KEY, null, storage)
     store.value = null

diff --git a/packages/core/useStorage/index.ts b/packages/core/useStorage/index.ts
@@ -1,4 +1,4 @@
-import { ref, shallowRef } from 'vue-demi'
+import { nextTick, ref, shallowRef } from 'vue-demi'
 import type { Awaitable, ConfigurableEventFilter, ConfigurableFlush, MaybeComputedRef, RemovableRef } from '@vueuse/shared'
 import { isFunction, pausableWatch, resolveUnref } from '@vueuse/shared'
 import type { StorageLike } from '../ssr-handlers'
@@ -169,10 +169,26 @@ export function useStorage<T extends(string | number | boolean | object | null)>
 
   function write(v: unknown) {
     try {
-      if (v == null)
+      if (v == null) {
         storage!.removeItem(key)
-      else
-        storage!.setItem(key, serializer.write(v))
+      }
+      else {
+        const serialized = serializer.write(v)
+        const oldValue = storage!.getItem(key)
+        if (oldValue !== serialized) {
+          storage!.setItem(key, serialized)
+
+          // send custom event to communicate within same page
+          if (window) {
+            window?.dispatchEvent(new StorageEvent('storage', {
+              key,
+              oldValue,
+              newValue: serialized,
+              storageArea: storage as any,
+            }))
+          }
+        }
+      }
     }
     catch (e) {
       onError(e)
@@ -209,7 +225,7 @@ export function useStorage<T extends(string | number | boolean | object | null)>
     if (event && event.storageArea !== storage)
       return
 
-    if (event && event.key === null) {
+    if (event && event.key == null) {
       data.value = rawInit
       return
     }
@@ -225,7 +241,11 @@ export function useStorage<T extends(string | number | boolean | object | null)>
       onError(e)
     }
     finally {
-      resumeWatch()
+      // use nextTick to avoid infinite loop
+      if (event)
+        nextTick(resumeWatch)
+      else
+        resumeWatch()
     }
   }
 }