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

发布于 2020-04-07 15:53:51 字数 1749 浏览 2168 评论 0

问题描述:我们在 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
})

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。