Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(useStorage): sync within page, close #1595
  • Loading branch information
antfu committed Dec 20, 2022
1 parent 30a43b2 commit 800f74f
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 12 deletions.
8 changes: 5 additions & 3 deletions packages/core/useStorage/demo.vue
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/core/useStorage/index.md
Expand Up @@ -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'

Expand Down
2 changes: 1 addition & 1 deletion packages/core/useStorage/index.test.ts
Expand Up @@ -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
Expand Down
32 changes: 26 additions & 6 deletions 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'
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
}
Expand All @@ -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()
}
}
}

0 comments on commit 800f74f

Please sign in to comment.