有接觸過(guò)前端小伙伴們都知道頁(yè)面之間的通信,那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于:“在html5中如何通過(guò)StorageEvent來(lái)完成頁(yè)面間通信?”這個(gè)問(wèn)題吧!下面是小編整理的相關(guān)內(nèi)容,希望對(duì)小伙伴們有所幫助!
我們都知道觸發(fā)?window.onstorage
?必須滿足以下兩個(gè)條件:
- 通過(guò)?
localStorage.setItem
?或?sessionStorage.setItem
?保存(更新)某個(gè)storage - 保存(更新)這個(gè)?
storage
?時(shí),它的新值必須與之前的值不同
上面的第二個(gè)條件,簡(jiǎn)單來(lái)講就是:要么是storage的初始化,因?yàn)椴淮嬖诘膕torage,其值為null;要么就是對(duì)已有storage的更新
舉例:
// 初始化storage
window.localStorage.setItem('a', 123);
// 注冊(cè)onstorage事件
window.onstorage = (e) => {
console.log(e);
};
// 更新storage
window.localStorage.setItem('a', 123);
上面的最后一行代碼并不會(huì)觸發(fā)onstorage事件,因?yàn)閍的值并沒(méi)有變化,前后都是123,所以瀏覽器判定這次更新是無(wú)效的
由于onstorage事件是瀏覽器觸發(fā)的,所以如果我們打開(kāi)了多個(gè)相同域名下的頁(yè)面,并在其中任一一個(gè)頁(yè)面執(zhí)行?window.localStorage.setItem
?方法(還要保證滿足文章開(kāi)頭提到的第二個(gè)條件),那么其他頁(yè)面如果監(jiān)聽(tīng)了?onstorage
?事件,則這些頁(yè)面中的onstorage事件回調(diào)都會(huì)被執(zhí)行
舉例:
// http://www.example.com/a.html
<script>
// 注冊(cè)onstorage事件
window.onstorage = (e) => {
console.log(e);
};
</script>
// http://www.example.com/b.html
<script>
// 注冊(cè)onstorage事件
window.onstorage = (e) => {
console.log(e);
};
</script>
// http://www.example.com/c.html
<script>
// 觸發(fā)onstorage事件
window.localStorage.setItem('a', new Date().getTime());
</script>
只要保證c頁(yè)面在a和b頁(yè)面之后打開(kāi)(哪怕三個(gè)頁(yè)面不在同一瀏覽器窗口,這里需要區(qū)別窗口與tab頁(yè)的區(qū)別),那么a和b頁(yè)面中的onstorage事件都會(huì)被觸發(fā)
現(xiàn)在我們已經(jīng)知道如何利用storage event實(shí)現(xiàn)了頁(yè)面之間的通信,那么這個(gè)通信對(duì)于我們有何用途呢?
其實(shí)我們只需知道是哪個(gè)storage的更新操作觸發(fā)了onstorage事件就足夠了,那么我們?nèi)绾沃滥兀縪nstorage事件回調(diào)和其他事件回調(diào)函數(shù)一樣,也接收一個(gè)event對(duì)象參數(shù),在這個(gè)對(duì)象中有3個(gè)有用的屬性,它們分別是:
- key 被初始化或更新的storage的鍵名
- oldValue 被初始化或更新的storage之前的值
- newValue 被初始化或更新的storage之后的值
結(jié)合這3個(gè)關(guān)鍵屬性,我們就可以實(shí)現(xiàn)頁(yè)面間的數(shù)據(jù)同步
最后提一下localStorage與sessionStorage的區(qū)別
localStorage 里面存儲(chǔ)的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間設(shè)置,而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除
以上是有關(guān)于:“在html5中如何通過(guò)StorageEvent來(lái)完成頁(yè)面間通信?”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享,當(dāng)然更多有關(guān)于html5的相關(guān)內(nèi)容都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。