监听localStorage中值的变化实现跨页面通信

分手后的思念是犯贱 2021-09-08 08:58 441阅读 0赞

本次分享一个之前困扰很久的，跨页面之间的通信方式。

以前跨页面通信，就拿我们之前vue项目中多页面为例，每个页面都是一个独立的vue实例，通过main.js初始化，各个页面之间的数据不互通，而通信方式最常见的方式是往缓存中存储值，其他需要得到这个值的页面通过定时器去实时查询缓存中该值的变化，然后进行通信。

但是定时器终究不是一个好的实现方式，而定时器的时间长短设置多少都很有考究，时间太短太耗性能，时间太长的话，又会存在一段时间拿不到最新值的情况。

现在有一个很方便的方式，那就是 监听，其他页面正常像以前一样往 storage 存储值，如：localStorage.setItem(‘calling’, ‘55894’)，然后需要获取该值的页面可以通过监听storage，就直接拿到变化后的值，示例如下：

// localhost:8080/pageOne 页面
    localStorage.setItem('calling', '55894')

// localhost:8080/pageTwo 页面
    window.addEventListener('storage', event => { 
    	if(event.key === 'calling') { 
    		services.call(event.newValue)
    	}
    })

部分属性介绍如下：

*  event.key：属性值为在 sessionStorage 或 localStorage 中被修改/新添加的数据键值；
 *  event.oldValue：属性值为在 sessionStorage 或 localStorage 中被修改前的值；
 *  event.newValue：属性值为在 sessionStorage 或 localStorage 中被修改后的值；
 *  event.url：属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址，即该值在哪个页面被写入/被修改的；

tips：只能监听 sessionStorage 或 localStorage 中值的变化，不能监听cookie中值的变化。

其余属性截图如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]  
好了，以上就是跨页面之间通信的一种方式。

期待能够对你有所帮助~

如有问题，请指出，接受批评。  
![在这里插入图片描述][20210615233018335.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/02d85ea343764e8b86a7df7728ff4c35.png
[20210615233018335.jpg_pic_center]: /images/20210813/46127d86f321445c970d42e742a9408a.png