Vue3监听localstorage-优快云博客

本文链接：https://blog.youkuaiyun.com/qing_jian0119/article/details/128736360

创建了一个名为watchLocalStorage.js的工具方法，重写了localStorage.setItem，当key-value变化时触发自定义事件。在main.js中引入并应用此方法，然后在需要的页面监听setItemEvent，当监听的key变化时执行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求：监听存入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是变化后的值
        }
    })