在根目录下创建一个名为utils的文件夹,在文件夹中创建一个updateLocalStorage.js文件
//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事件.