封装localStorage，解决获取不到更新后的值问题

问题描述：我们在js里面获取了某一个localstorage的值，但是之后它改变了，我们js只执行一遍没办法再次获取它的值，当然可以刷新页面获取，但如果是我们的页面就不能刷新页面了，此时：
我们可以重写localStorage的setItem方法，当调用setItem方法设置新值的时候，会new Event(‘setItemEvent’)

实现方法

dispachEventStorage(){
	const singleSetItem = localStorage.setItem 
	localStorage.setItem  = function (key,value){
	let setEvent  = new Event('setItemEvent')
	setEvent.key = key
	setEvent.value = value
	window.dispach('setEvent')
	singleSetItem.apply(this,argumnets) 
	}  
}

在main.js里面全局引入，并use，然后调用该dispatchEventStroage方法，以解决setitemEvent不会立即生效的问题

import Tools from '@/utils/tools'
Vue.use(Tools)
// 为了解决setItemEvent不立即生效，使用事件派发强制更高
Tools.dispatchEventStroage()

然后就可以使用了
如果我们在每次发送请求的时候都需要携带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
})

new Event

自定义事件
new Event(typeArg[,option])

    typeArg 事件名称

   option

            "bubbles"，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。

            "cancelable",可选，Boolean类型，默认值为 false， 表示该事件能否被取消。

let click = new Event('click') // 自定义事件名  调用的时候需要触发