本次分享一個(gè)之前困擾很久的菲茬，跨頁(yè)面之間的通信方式娱俺。
以前跨頁(yè)面通信缎谷，就拿我們之前vue項(xiàng)目中多頁(yè)面為例井濒，每個(gè)頁(yè)面都是一個(gè)獨(dú)立的vue實(shí)例，通過main.js初始化列林，各個(gè)頁(yè)面之間的數(shù)據(jù)不互通瑞你，而通信方式最常見的方式是往緩存中存儲(chǔ)值，其他需要得到這個(gè)值的頁(yè)面通過定時(shí)器去實(shí)時(shí)查詢緩存中該值的變化希痴，然后進(jìn)行通信者甲。
但是定時(shí)器終究不是一個(gè)好的實(shí)現(xiàn)方式，而定時(shí)器的時(shí)間長(zhǎng)短設(shè)置多少都很有考究砌创，時(shí)間太短太耗性能虏缸，時(shí)間太長(zhǎng)的話甥厦，又會(huì)存在一段時(shí)間拿不到最新值的情況。
現(xiàn)在有一個(gè)很方便的方式寇钉，那就是 監(jiān)聽刀疙，其他頁(yè)面正常像以前一樣往 storage 存儲(chǔ)值，如：localStorage.setItem('calling', '55894')扫倡，然后需要獲取該值的頁(yè)面可以通過監(jiān)聽storage谦秧，就直接拿到變化后的值，示例如下：
// localhost:8080/pageOne 頁(yè)面
localStorage.setItem('calling', '55894')
// localhost:8080/pageTwo 頁(yè)面
window.addEventListener('storage', event => {
if(event.key === 'calling') {
services.call(event.newValue)
}
})
部分屬性介紹如下：
- event.key：屬性值為在 sessionStorage 或 localStorage 中被修改/新添加的數(shù)據(jù)鍵值撵溃；
- event.oldValue：屬性值為在 sessionStorage 或 localStorage 中被修改前的值疚鲤；
- event.newValue：屬性值為在 sessionStorage 或 localStorage 中被修改后的值；
- event.url：屬性值為修改 sessionStorage 或 localStorage 中值的頁(yè)面的URL地址缘挑，即該值在哪個(gè)頁(yè)面被寫入/被修改的集歇；
tips：只能監(jiān)聽 sessionStorage 或 localStorage 中值的變化，不能監(jiān)聽cookie中值的變化语淘。
其余屬性截圖如下：
1.png
好了诲宇，以上就是跨頁(yè)面之間通信的一種方式。
期待能夠?qū)δ阌兴鶐椭鷡
如有問題惶翻，請(qǐng)指出姑蓝，接受批評(píng)。
QQ圖片20210615233008.jpg
