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