监听localStorage中的数据变化

没有太好的办法，重写localstorage

1、我们可以用window.dispatchEvent()这个方法来派发一个事件，让window去监听。新实例出来的这个事件会被绑定到window上来监听它的调用，当调用的时候可以拿到setItem的新值，直接赋值就可以
具体实现
2、先在src下新建utils文件夹，新建tools.js，它会抛出一个dispatchEventStroage方法
3、 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
4、
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) } }
4、在main.js里面全局引入，并use，然后调用该dispatchEventStroage方法，以解决setitemEvent不会立即生效的问题（你也可以选择在页面中引入）
5、import Tools from ‘@/utils/tools’
Vue.use(Tools)
// 为了解决setItemEvent不立即生效，使用事件派发强制更高
Tools.dispatchEventStroage()
6、然后就可以使用了
如果我们在每次发送请求的时候都需要携带token字段，token有时候可以存在localstorage里面，但是当token发生改变时，我们js不知道已经改变，所以就需要用到以上方法了。
const reqHeaders = {
Accept: ‘text/json’,
// 第一次登录之后返回的token，之后每次请求都携带token字段进行验证
token: localStorage.getItem(‘token’) || ‘’
}
// window全局监听localStorage的setItem事件以及时更新
window.addEventListener(‘setItemEvent’, function (e) {
reqHeaders.token = e.newValue
})

还有一些自定义事件的触发dispatchEvent

网址在这：网址