useLocalStorage should sync with localStorage

[jd-solanki]

Clear and concise description of the problem

I am using the card code component which lets you change the code language ts or js. I use useLocalStorage in my card component to get and set language to show in the card.

However, If I change the language from one card then it doesn't get reflected in other cards until I refresh or come back from another route.

Playground

Suggested solution

useLocalStorage can accept a arg to allow sync between instances.

Alternative

None

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[climba03003]

I am facing the similar issue. The problem should be the localStorage do not update instantly or it wait too long to update. I assume it is the problem of using watchPausable.

[gehringf]

If possible you should share the ref in a separate composable in this case (e.g.

export function usePreferredLanguage() {
  return {
    lang: useStorage('preferredCodeLanguage', 'ts')
  }
}

then in your component

const { lang } = usePreferredLanguage();

[robokozo]

Ran into this myself today. Glad to see it's already on github!

[dajpes]

Do we have a solution for this?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jd-solanki]

👀

[nolde]

I have been experiencing this with vue3 as well... if you reload the page, value loads correctly, but never seems to track value until next reload.

[harmyderoman]

I'm not sure if this is possible. The problem is in the storage listeners, as it is written in the MDN docs, they will not work on the same page, only on different tabs.

[nolde]

@harmyderoman You're correct. I was not aware of that.

Probably would be good to add a disclaimer to the doc. I totally expected it to be fully reactive within the context of the same page. Guess I am out of luck.

[harmyderoman]

@nolde don't be upset. Vueuse already has a solution for you. Just use createGlobalState. Like this

// store.js
import { createGlobalState, useStorage } from '@vueuse/core'

export const useGlobalState = createGlobalState(
  () => useStorage('vueuse-local-storage', 'initialValue'),
)

[nolde]

@harmyderoman Ooooh that's interesting. I'll take a look into that! Thanks a lot mate!

[harmyderoman]

#1595

[pionxzh]

Personally, I do monkey patching on storage.setItem and storage.removeItem.
BUT, you need to do the dedup by yourself to stop the infinity updating.
In the end, I wrote one useLocalStorage by myself :/

For people who want to try this method:

It's definitely not an ideal solution

function hookBefore(target: any, methodName: string, hookFn: Function) {
    const original = target[methodName]
    target[methodName] = function (...args: any[]) {
        hookFn(...args)
        return original.apply(this, args)
    }
}

function tryPatchLocalStorage() {
    // @ts-expect-error mark it as patched
    if (localStorage.setItem.__patched__) return
    // @ts-expect-error mark it as patched
    localStorage.setItem.__patched__ = true

    hookBefore(localStorage, 'setItem', (key: string, newValue: string) => {
        const oldValue = localStorage.getItem(key)
        const event = new StorageEvent('storage', {
            key,
            newValue,
            oldValue,
            storageArea: localStorage,
        })
        nextTick(() => window.dispatchEvent(event))
    })

    hookBefore(localStorage, 'removeItem', (key: string) => {
        const oldValue = localStorage.getItem(key)
        const event = new StorageEvent('storage', {
            key,
            newValue: undefined,
            oldValue,
            storageArea: localStorage,
        })
        nextTick(() => window.dispatchEvent(event))
    })
}

[smallnine9]

Fixed by 800f74f
Maybe we can close it.

[meshbor]

Seems problem is not solved yet