vue 监听localstorage值发生变化

最新推荐文章于 2024-03-27 11:02:43 发布

违规昵称001

最新推荐文章于 2024-03-27 11:02:43 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_37528005/article/details/127647256

本文介绍如何通过重写localStorage.setItem方法并在main.js中引入，实现对localStorage变化的监听。具体包括监听setItem事件并根据key值的不同执行相应的操作。

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

1.项目新增一个tool.js文件，复制代码如下：

//****将这段内容放在tool.js文件中****
// 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
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;

2.main.js中引入该js：

import tool from "./plugins/tool.js";
Vue.use(tool);

3在需要监听的文件中：

    //解决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(e)
        if(e.key==="InteligenceData"){
          let newV = JSON.parse(e.newValue)
          newV.forEach((item)=>{
              item.type = '1' // 为拆条列表添加进来的数据加一个type
              if(item.ip_type == 3){
                _this.audioData.push(item)
              }else{
                _this.InteligenceData.push(item)
              }
           })
        }
    })

参考https://www.jb51.net/article/261226.htm