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组件生命周期运行原理解析
Nov 25 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue实现滑动解锁功能
Mar 03 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中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python中文竖排显示的方法
2015/07/28 Python
python游戏地图最短路径求解
2019/01/16 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python批量处理文件或文件夹
2020/07/28 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
房地产开盘策划方案
2014/02/10 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
培训班通知
2015/04/25 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
windows系统搭建WEB服务器详细教程
2022/08/05 Servers