vue 跨页面通信怎么弄

Posted 2023-04-20

参考技术A 在vue的项目里面，组件之间相互通信的方式有很多，比如props/$emit、$on/$emit、vuex以及利用ref通信等方式。跨组件有这么多的通信方式可以选择，但是当需求要求我们跨页面通信怎么办呢？

由于每个页面都是一个独立的vue实例，页面与页面之间不存在数据上的沟通，所以，从vue框架上暂时行不通了。然后想到可以利用页面缓存的方式来进行通信。

在Web Storage中有两种储存数据的方式，分别是sessionStorage和localStorage，他们之间的区别在于生命周期的不同以及作用域（同源条件下）的不同。sessionStorage仅在当前会话中有效，关闭页面或者浏览器后数据会被自动清除，其作用域仅限于当前页面，不能跨tab页面访问。localStorage的生命周期是永久有效，只要是不主动删除，数据会一直被存储下来，其作用域也可以跨同源的页面访问。

有了localStorage跨页面的作用域，就可以做到页面之间的通信了，这下只要能解决如何监听其存储数据的变化就能实现了。于是想到了一个比较粗暴的方式——利用定时器：在一定间隔时间内获取localStorage中的数据并更新到获取数据的页面中去，这样便实现了数据的监听。但这样未免也太耗费性能了，为了少耗费性能而拉长时间间隔，但数据又总是更新不及时。这样这个方式就被待定了。

这时了解到有一个专门用来监听本地存储的数据变化的事件为Storage事件：Web Storage API内建了一套事件通知机制，当存储区域的内容发生改变（包括增加、修改、删除数据）时，就会自动触发 storage 事件，并把它发送给所有感兴趣的监听者。所有支持 localStorage 的浏览器都支持 storage 事件，包括 IE8。但IE 8不支持 W3C 标准的 addEventListener。因此，为了监听 storage 事件，还需要检测浏览器支持哪种事件机制：

有了这个storage事件，跨页面通信就变得很容易了：

前端跨页面通信方案分析

前言

大家好，我是CoderBin，本次对前端跨页面通信方案进行总结分析，希望对大家有所帮助。 感谢大家的留言点赞收藏