Vue 重写 localStorage.setItem 方法实现双向绑定 - 文章教程

Vue 重写 localStorage.setItem 方法实现双向绑定

发布于 2020-04-07 字数 2149 浏览 1986 评论 0

Vue 重写 localStorage.setItem 方法实现双向绑定

问题描述:我们在 js 里面获取了某一个 localstorage 的值,但是后期它可能改变了,我们js只执行一遍没办法再次获取它的值,当然可以刷新页面获取,但如果是我们的但页面就不能刷新页面了,此时:

  1. 我们可以重写localStorage的setItem方法,当调用setItem方法设置新值的时候,会new Event(‘setItemEvent’)
  2. 但是只是实例化事件了,怎么去监听呢?
  3. 我们可以用window.dispatchEvent()这个方法来派发一个事件,让window去监听。新实例出来的这个事件会被绑定到window上来监听它的调用,当调用的时候可以拿到setItem的新值,直接赋值就可以

具体实现

先在 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)
  }
}

使用方法

在 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
})

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0