Vue3监听localstorage

项目需求：监听存入localstorage的某个key对应的value值有没有变化，如果发生变化，则执行一些操作。

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是变化后的值
        }
    })