小編給大家分享一下Storage Event實現頁面間通信的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯公司是一家專業(yè)提供光澤企業(yè)網站建設,專注與成都網站設計、成都網站建設、H5高端網站建設、小程序制作等業(yè)務。10年已為光澤眾多企業(yè)、政府機構等服務。創(chuàng)新互聯專業(yè)網絡公司優(yōu)惠進行中。

我們都知道觸發(fā)window.onstorage必須滿足以下兩個條件：

1. 通過localStorage.setItem或sessionStorage.setItem保存（更新）某個storage

2. 保存（更新）這個storage時，它的新值必須與之前的值不同

上面的第二個條件，簡單來講就是：要么是storage的初始化，因為不存在的storage，其值為null；要么就是對已有storage的更新

舉例：

// 初始化storage
window.localStorage.setItem('a', 123);

// 注冊onstorage事件
window.onstorage = (e) => {
  console.log(e);
};

// 更新storage
window.localStorage.setItem('a', 123);

上面的最后一行代碼并不會觸發(fā)onstorage事件，因為a的值并沒有變化，前后都是123，所以瀏覽器判定這次更新是無效的

由于onstorage事件是瀏覽器觸發(fā)的，所以如果我們打開了多個相同域名下的頁面，并在其中任一一個頁面執(zhí)行window.localStorage.setItem方法（還要保證滿足文章開頭提到的第二個條件），那么其他頁面如果監(jiān)聽了onstorage事件，則這些頁面中的onstorage事件回調都會被執(zhí)行

舉例：

// 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>
// 觸發(fā)onstorage事件
window.localStorage.setItem('a', new Date().getTime());
</script>

只要保證c頁面在a和b頁面之后打開（哪怕三個頁面不在同一瀏覽器窗口，這里需要區(qū)別窗口與tab頁的區(qū)別），那么a和b頁面中的onstorage事件都會被觸發(fā)

現在我們已經知道如何利用storage event實現了頁面之間的通信，那么這個通信對于我們有何用途呢？
其實我們只需知道是哪個storage的更新操作觸發(fā)了onstorage事件就足夠了，那么我們如何知道呢？onstorage事件回調和其他事件回調函數一樣，也接收一個event對象參數，在這個對象中有3個有用的屬性，它們分別是：

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

2. oldValue 被初始化或更新的storage之前的值

3. newValue 被初始化或更新的storage之后的值

結合這3個關鍵屬性，我們就可以實現頁面間的數據同步

最后提一下localStorage與sessionStorage的區(qū)別

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

看完了這篇文章，相信你對Storage Event實現頁面間通信的方法有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道，感謝各位的閱讀！

分享標題：StorageEvent實現頁面間通信的方法
本文URL：http://aaarwkj.com/article0/igseio.html

成都網站建設公司_創(chuàng)新互聯，為您提供網頁設計公司、電子商務、網站改版、網站設計、企業(yè)網站制作、網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯