vue实现监听localstorage值变化

//****将这段内容放在tool.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;

import tool from "./utils/tool";

Vue.use(tool);

//解决this指向问题，在window.addEventListener中this是指向window的。
//需要将vue实例赋值给_this,这样在window.addEventListener中通过_this可以为vue实例上data中的变量赋值
let _this=this;
//根据自己需要来监听对应的key
window.addEventListener("setItemEvent",function(e){
    //e.key : 是值发生变化的key
    //例如 e.key==="token";
    //e.newValue : 是可以对应的新值
    if(e.key==="token"){
        console.log(e.newValue);
        _this.token=e.newValue;
    }
})

// localhost:8080/pageOne 页面
localStorage.setItem('calling', '55894')

// localhost:8080/pageTwo 页面
window.addEventListener('storage', event => {
	if(event.key === 'calling') {
		services.call(event.newValue)
	}
})