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 相关文章推荐
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vuex的使用步骤
Jan 06 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP中的类型约束介绍
2015/05/11 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
AngularJS语法详解
2015/01/23 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
如何编写jquery插件
2017/03/29 jQuery
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python反射用法实例简析
2017/12/22 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python 字典访问的三种方法小结
2019/12/05 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
python中format函数如何使用
2020/06/22 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
小学生植树节活动总结
2014/07/04 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python