utils.js
// 重写setItem事件,当使用setItem的时候,触发,window.dispatchEvent派发事件
export const dispatchEventStroage = (monitorKey) => { // 1 ** 放到main.js里执行
const signSetItem = localStorage.setItem
localStorage.setItem = function (key, val) {
if (monitorKey && key == monitorKey) {
let setEvent = new Event('setItemEvent')
setEvent.key = key
setEvent.newValue = val
window.dispatchEvent(setEvent)
} else {
let setEvent = new Event('setItemEvent')
setEvent.key = key
setEvent.newValue = val
window.dispatchEvent(setEvent)
}
signSetItem.apply(this, arguments)
}
}
export const monitorDispatchEvent = (callback) => { //2 ** 放到 监听的页面 去执行 mounted
// window全局监听localStorage的setItem事件以及时更新
window.addEventListener('setItemEvent', function (e) { //1 监听自定义事件 不同页面监听不到 相同页面可以监听到
if (callback) { //2 router 守护里触发 修改 需要监听 setItemEvent 自定义事件
callback(e); // e.key e.newValue
}
})
window.addEventListener('storage', function (e) { // 1 原生事件 不同页面可以监听到 相同页面 监听不到
if (callback) { // 2 a 页面修改 b页面监听 需要使用 storage原生事件 监听得到
callback(e); // e.key e.newValue
}
})
}