vue 项目中如何监听 localStorage的变化

来源

问题的来源是看到掘金某位大佬发的一个链接，具体链接地址便携小空调

在页面中有一个独立遥控器的功能，在另外一个窗口修改了温度和模式后，当前页面会实时的更新，抱着好奇的态度研究了一下子，发现是通过本地localStorage存储实现的。

然后就引发了另外一个问题，就是localStorage是怎么做到实时更新的，具体的监听实现方式如下。

vue监听localStorage 变化

应用场景：页面B修改了一些数据，存储了localStoragez中，在A页面中需要实时获取数据更改，页面必须是同源（即同一个域名，例如：都在https://www.baidu.com/域名下）

在B页面中存储

    localStorage.set('name', 'value')
复制代码

在A页面中实时监听获取

mounted() {
    //监听缓存中指定key的值变化
    window.addEventListener('storage',  (e) => {
      if(e.key && e.key == 'name' && e.newValue){
        this.socketQuery = e.newValue //即可获取到页面B最新的name
      }
    })
 },
复制代码

写在最后

通过本篇我们知道了：localStorage的动态更新规则。

开发工作中，即使你没有用到localStorage或者根本不认识localStorage也一样摸鱼打卡上下班。但问题的关键是localStorage吗？

不！

你以为本篇是在写localStorage？错！本篇是在写我对这个项目的好奇！

好奇这个作者的脑洞，好奇她在用代码来描述生活中的一些小事务。

……

没错，哎，就是玩儿~