解决本地存储的值改变的时候js不能实时监听到的问题

• 问题描述：我们在js里面获取了某一个localstorage的值，但是后期它可能改变了，我们js只执行一遍没办法再次获取它的值，当然可以刷新页面获取，但如果是我们的但页面就不能刷新页面了，此时：
  • 我们可以重写localStorage的setItem方法，当调用setItem方法设置新值的时候，会new Event('setItemEvent')
  • 但是只是实例化事件了，怎么去监听呢？
  • 我们可以用window.dispatchEvent()这个方法来派发一个事件，让window去监听。新实例出来的这个事件会被绑定到window上来监听它的调用，当调用的时候可以拿到setItem的新值，直接赋值就可以

具体实现

1. 先在src下新建utils文件夹，新建tools.js，它会抛出一个dispatchEventStroage方法

   // 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
     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)
       }
     }复制

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

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

3. 然后就可以使用了
   1. 如果我们在每次发送请求的时候都需要携带token字段，token有时候可以存在localstorage里面，但是当token发生改变时，我们js不知道已经改变，所以就需要用到以上方法了。

   2. const reqHeaders = {
        Accept: 'text/json',
        // 第一次登录之后返回的token，之后每次请求都携带token字段进行验证
        token: localStorage.getItem('token') || ''
      }
      // window全局监听localStorage的setItem事件以及时更新
      window.addEventListener('setItemEvent', function (e) {
        reqHeaders.token = e.newValue
      })复制

       

推荐内容