vue项目如何监听localStorage或sessionStorage的变化


Posted in Vue.js onJanuary 04, 2021

出现这个问题的起因:在一个VUE页面中,引入两个组件,A组件实现基础信息展示,B组件展示列表,我要通过A组件的一个按钮触发状态,然后B组件根据A组件触发的状态来做业务处理,首先想到的是把状态放在localStorage,接下去就是在B组件怎么监听A组件状态

解决方法:

1.首先在 main.js 中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件并派发事件。

/**
 * @description
 * @author (Set the text for this tag by adding docthis.authorName to your settings file.)
 * @date 2019-05-29
 * @param { number } type 1 localStorage 2 sessionStorage
 * @param { string } key 键
 * @param { string } data 要存储的数据
 * @returns 
 */
Vue.prototype.$addStorageEvent = function (type, key, data) {
  if (type === 1) {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        localStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent);
      }
    }
    return storage.setItem(key, data);
  } else {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent);
      }
    }
    return storage.setItem(key, data);
  }
}

还有一个简单封装监听localStorage

2.在A组件中调用——写入缓存

this.$addStorageEvent(2, "user_info", data);

或者

this.resetSetItem('watchStorage', jsonObj);

3.在B组件中监听

window.addEventListener('setItem', (e) => {
   console.log(e);
});

或者

window.addEventListener('setItem', ()=> {
    this.newVal = sessionStorage.getItem('watchStorage');
    var data=JSON.parse(this.newVal)
     console.log(data)
})

以上就是vue 项目如何监听localStorage或sessionStorage的变化的详细内容,更多关于vue 项目监听localStorage或sessionStorage的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
用vue设计一个日历表
Dec 03 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 #Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 #Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 #Vue.js
vue中使用echarts的示例
Jan 03 #Vue.js
vue 动态生成拓扑图的示例
Jan 03 #Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 #Vue.js
vue中activated的用法
Jan 03 #Vue.js
You might like
十天学会php(1)
2006/10/09 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
JavaScript静态的动态
2006/09/18 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python流程控制常用工具详解
2020/02/24 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
中英文自我评价语句
2013/12/20 职场文书
毕业寄语大全
2014/04/09 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
班主任寄语2015
2015/02/26 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书