vue中监听localStorage中的值

小白白白丿

已于 2023-06-07 09:47:37 修改

阅读量641

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-05-18 10:10:29 首次发布

本文链接：https://blog.csdn.net/I_Do_Well/article/details/130740834

vue 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了如何通过重写localStorage.setItem方法并在设置值时触发自定义事件，以便在Vue应用中监听localStorage的变化。在utils文件夹的tool.js中定义了新的setItem函数，然后在main.js中全局引入并使用。监听代码需写在组件的mounted()生命周期钩子中，确保在window对象上添加事件监听器。当localStorage的特定键值变化时，可以捕获并处理这个变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题重点：重写localStorage.setItem事件

当使用setItem的时候触发 window.dispatchEvent派发事件

第一步

在根目录下创建utils文件夹，再创建一个tool.js文件

写下重写localStorage.setItem事件的代码

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

export default dispatchEventStroage;

第二步

在main.js全局引用该文件

import tool from "./utils/tool";
Vue.use(tool);

第三步

在你需要监听localStorage的文件中加入下列代码，即可实现你在组件任意位置改变localStorage某个键的值，在需要监听localStorage的组件内都能监听到值的改变，从而重新赋值，以此达到监听的目的。

注意: 监听代码写在 mounted() 中。。。

  mounted() {
    //解决this指向问题，在window.addEventListener中this是指向window的。
    //需要将vue实例赋值给_this,这样在window.addEventListener中通过_this可以为vue实例上data中的变量赋值
    let _this = this;
    //根据自己需要来监听对应的key
    window.addEventListener("setItemEvent", function (e) {
      //e.key : 是值发生变化的key
      //例如 e.key==="token";
      //e.newValue : 是可以对应的新值
      console.log("值改变了");
      if (e.key === "token") {
        console.log(e.newValue);
        _this.token= JSON.parse(e.newValue);
      }
    });
  },