vue项目中监听sessionStorage值发生变化
首先在main.js中给Vue.protorype注册一个全局方法,
其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,
然后创建一个StorageEvent方法,当我在执行sessionStorage.setItem(k, val)这句话的时候,初始化事件,并派发事件。
- Vue.prototype.resetSetItem = function (key, newVal) {
- if (key === 'watchStorage') {
- // 创建一个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, newVal);
- }
- }
- 如何触发
- 在一个路由(比如路由A)存储值得时候,使用下面的方法:
- this.resetSetItem('watchStorage', 11111);
- 如何监听
- 如果在另外一个路由(比如路由B)中,我们想根据watchStorage的变化来请求接口刷新页面数据的时候,可以在这个路由中created钩子函数中监听:
- window.addEventListener('setItem', ()=> {
- this.newVal = sessionStorage.getItem('watchStorage');
- })
- ————————————————
vue项目中监听sessionStorage值发生变化的更多相关文章
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- 原生js监听input值发生变化
原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...
- vue项目如何监听窗口变化,达到页面自适应?
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 在vue中监听storage的变化
1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
随机推荐
- lua基础学习(四)
一,lua字符串 单引号间的一串字符. 双引号间的一串字符. [[和]]间的一串字符. 1.几个常用的转义字符 \b 退格 \f 换页 \n 换行 \r 回车 \t 跳到下一个tab位置 \0 ...
- 数组被遗忘的内置对象--》Array.find()
需求:一个数组包含很多对象,对象中有很多属性.现在给你一个值,且这个值再这个数组的某个对象存在,那么如何找到这个对象? 首先想的是for循环遍历,但这样非常麻烦,js给我们提供了一个find()方法, ...
- java中变量的线程安全性
静态变量:线程非安全.静态变量即类变量,位于方法区,为所有对象共享,共享一份内存,一旦静态变量被修改,其他对象均对修改可见,故线程非安全.实例变量:单例模式(只有一个对象实例存在)线程非安全,非单例线 ...
- python 并发编程 多线程 开启线程的两种方式
一 threading模块介绍 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性 二 开启线程的两种方式 第一种 每造一个进程,默认有一个线程,就是 ...
- 交换机安全学习笔记 第六章 IPV4 ARP攻击
ARP欺骗攻击 常用工具: dsniff(Linux/windows).ettercap(Linux/windows).cain(仅windows). ARP欺骗攻击的目的是嗅探发往某主机的所有IP ...
- PTA(Basic Level)1008.数组元素循环右移问题
一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥0)个位置,即将A中的数据由(A0A1⋯AN−1)变换为(AN−M⋯AN−1A0A1⋯AN−M−1)(最 ...
- os.path路径拓展 python3
os.path-对路径path进行的操作 在调用os.path时, 根据操作系统的不同 程序会选择使用posixpath.py或ntpath.py(由os中的代码实现). 对文件命名时应当使用unic ...
- zookeeper 实战操作
一:监听服务端zookeeper节点数据改变 import java.io.IOException; import java.util.concurrent.CountDownLatch; impor ...
- python2.7.5升级到2.7.14或者直接升级到3.6.4
python2.7.5升级到2.7.14 1.安装升级GCC yum install -y gcc* openssl openssl-devel ncurses-devel.x86_64 bzip2 ...
- CSS 相对定位 绝对定位
css中的相对定位和绝对定位. 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将 ...