扣丁學堂HTML5培訓簡述利用Storage Event實現頁面間通訊的示例

本篇文章主要是給小夥伴們介紹利用Storage Event實現頁面間通訊的示例代碼的相關資料，下面是扣丁學堂HTML5培訓小編給你們整理的資料，感興趣的小夥伴就隨小編來了解一下吧，但願對小夥伴有幫助。

咱們都知道觸發window.onstorage必須知足如下兩個條件：

經過localStorage.setItem或sessionStorage.setItem保存(更新)某個storage

保存(更新)這個storage時，它的新值必須與以前的值不一樣

上面的第二個條件，簡單來說就是：要麼是storage的初始化，由於不存在的storage，其值爲null;要麼就是對已有storage的更新。

舉例：

// 初始化storage

window.localStorage.setItem('a', 123);

// 註冊onstorage事件

window.onstorage = (e) => {

console.log(e);

};

// 更新storage

window.localStorage.setItem('a', 123);

上面的最後一行代碼並不會觸發onstorage事件，由於a的值並無變化，先後都是123，因此瀏覽器斷定此次更新是無效的。

因爲onstorage事件是瀏覽器觸發的，因此若是咱們打開了多個相同域名下的頁面，並在其中任一一個頁面執行window.localStorage.setItem方法（還要保證知足文章開頭提到的第二個條件），那麼其餘頁面若是監聽了onstorage事件，則這些頁面中的onstorage事件回調都會被執行。

舉例：

// http://www.example.com/a.html

<script>

// 註冊onstorage事件

window.onstorage = (e) => {

console.log(e);

};

</script>

// http://www.example.com/b.html

<script>

// 註冊onstorage事件

window.onstorage = (e) => {

console.log(e);

};

</script>

// http://www.example.com/c.html

<script>

// 觸發onstorage事件

window.localStorage.setItem('a', new Date().getTime());

</script>

只要保證c頁面在a和b頁面以後打開（哪怕三個頁面不在同一瀏覽器窗口，這裏須要區別窗口與tab頁的區別），那麼a和b頁面中的onstorage事件都會被觸發。

如今咱們已經知道如何利用storage event實現了頁面之間的通訊，那麼這個通訊對於咱們有何用途呢？

其實咱們只需知道是哪一個storage的更新操做觸發了onstorage事件就足夠了，那麼咱們如何知道呢?onstorage事件回調和其餘事件回調函數同樣，也接收一個event對象參數，在這個對象中有3個有用的屬性，它們分別是：

key 被初始化或更新的storage的鍵名

oldValue 被初始化或更新的storage以前的值

newValue 被初始化或更新的storage以後的值

結合這3個關鍵屬性，咱們就能夠實現頁面間的數據同步

最後提一下localStorage與sessionStorage的區別

localStorage 裏面存儲的數據沒有過時時間設置，而存儲在 sessionStorage 裏面的數據在頁面會話結束時會被清除。

想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師爲您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。