问题分析和解决

问题：在做项目的时候，遇到需要使用监听本地存储的需求，于是进行了操作：

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存储里面。这样每次移出的就是上次的注册监听的函数。

总结：

1. 注册了监听，记得移出监听，避免重复注册
2. 移出的监听函数必须是地址一样，不是长的一样
3. vue实例存在了里面的方法就挂载在上面了

StorageEvent

这样的写法看似没有任何问题，打印出这个e事件，是一个StorageEvent事件

这里的属性可以自己百度搜索，说说最常用的几个：

• key：表示当前存储变化的属性
• newValue：也就是当前变化的属性的最新值
• url：修改属性值的页面的地址

监听存储在同一个页面不能实现，如果非要实现在同一个页面触发并监听，需要自己修改事件。参考https://blog.csdn.net/ruangong1203/article/details/52841135