html5页面改变事件,h5 localStorage 值改变 注册事件(兼容同页面与不同页面触发值改变的监听)...

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

}

})

}