vue之监听本地存储
问题分析和解决问题:在做项目的时候,遇到需要使用监听本地存储的需求,于是进行了操作:window.addEventListener('storage', function (e) {console.log(e);});如果在一个页面触发缓存变化存储一个route,另一个页面监听并且跳转这个route,最后关闭这个跳转过后的页面,回到之前那个页面。这时候发生了:在监听存储的...
问题分析和解决
问题:在做项目的时候,遇到需要使用监听本地存储的需求,于是进行了操作:
window.addEventListener('storage', function (e) {
console.log(e);
});
如果在一个页面触发缓存变化存储一个route,另一个页面监听并且跳转这个route,最后关闭这个跳转过后的页面,回到之前那个页面。这时候发生了:在监听存储的页面,打印的事件个数是: 1 2 3 4 5...依次递增。
原因:因为之前那个路由跳转了,这个监听方法写在组件的created方法里面,那么每次跳转都会注册依次监听
解决办法:每次监听之前去除监听。
于是:
window.removeEventListener('storage', this.listenFun);
window.addEventListener('storage', this.listenFun);
因为移除的监听函数必须和是注册的监听函数,而这个函数需要获取组件的this值,所以把函数写成了method的方法。
但是发现,还是移出不了。(猜测:这两个函数是不是不是同一个函数?)
打断点调试:进入移出事件监听操作的时候,this.listenFun已经存在,就是method方法已经能用了,进行移出不报错,在监听。
下一次路由回去,再进入的时候,这个函数并不上次监听存储的函数了,又是新的组件的函数了,虽然长得一样。因此永远移除不了监听。
解决办法:既然两个函数不一样,那么就用变量存储,又因为函数里面使用到组件的this,因此不能在组件初始化之间生成。想到,统一保存到vuex存储里面。这样每次移出的就是上次的注册监听的函数。
总结:
- 注册了监听,记得移出监听,避免重复注册
- 移出的监听函数必须是地址一样,不是长的一样
- vue实例存在了里面的方法就挂载在上面了
StorageEvent
这样的写法看似没有任何问题,打印出这个e事件,是一个StorageEvent事件
这里的属性可以自己百度搜索,说说最常用的几个:
- key:表示当前存储变化的属性
- newValue:也就是当前变化的属性的最新值
- url:修改属性值的页面的地址
监听存储在同一个页面不能实现,如果非要实现在同一个页面触发并监听,需要自己修改事件。参考https://blog.csdn.net/ruangong1203/article/details/52841135
更多推荐
所有评论(0)