Vue3 はローカルストレージを監視します

プロジェクト要件: localstorage に格納されているキーに対応する値が変更されたかどうかを監視し、変更があった場合は何らかの操作を実行します。

1. utils でメソッドを作成する

util フォルダーで、新しい js ファイルを作成し、習慣に従って名前を付けます。ここでは、watchLocalStorage.js という名前を付けます。

次のコードを watchLocalStorage.js に記述します。

export const dispatchEventStrage = () => {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function(key, val) {
        let setEvent = new Event('setItemEvent')
        setEvent.key = key
        setEvent.newValue = val
        window.dispatchEvent(setEvent)
        signSetItem.apply(this, arguments)
    }
}

2.次にmain.jsに導入する

import { dispatchEventStorage } from '@/util/watchLocalStorage'
app.use(dispatchEventStorage)
app.mount('#app')

3.最後に、使用したページで呼び出します

window.addEventListener('setItemEvent', function(e) {
        // 这里的info是我存入localstorage的key值
        if (e.key === 'info') {
            // console.log('##', e.newValue)
            // 如果发生变化的e.key=想要监听的key值，则执行需要的操作
            // e.newValue是变化后的值
        }
    })