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
}
})
}

转载于:https://my.oschina.net/mirclewang/blog/3081437

• 点赞
• 收藏
• 分享
• 文章举报