//updateLocalStorage.js
// 重写setItem事件,当使用setItem的时候,触发,window.dispatchEvent派发事件
function dispatchEventStroage() {
    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)
    }
}
export default dispatchEventStroage;

main.js中引入

import updateLocalStoragefrom "./utils/updateLocalStorage";
Vue.use(updateLocalStorage);

在需要监听localstorage中数据变化的文件中加以下代码

//根据自己需要来监听对应的key
window.addEventListener("setItemEvent",function(e){
	//e.key : 是值发生变化的key
	//例如 e.key==="token";
	//e.newValue : 是可以对应的新值
	if(e.key==="token"){
		console.log(e.newValue);
	}
})

注意: 此方法只能监听到setItem事件.

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐