首頁 > web前端 > H5教程 > 主體

Storage Event如何實現頁間通信

不言
發布: 2018-07-24 09:58:20
原創
2570 人瀏覽過

這篇文章分享給大家的內容是關於Storage Event如何實現頁間通信,內容很有參考價值,希望可以幫到有需要的小伙伴。

我們都知道觸發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);
登入後複製

上面的最後一行程式碼並不會觸發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個有用的屬性,它們分別是:

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

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

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

結合這3個關鍵屬性,我們就可以實現頁間的資料同步

#最後提一下localStorage與sessionStorage的差異

localStorage 裡面儲存的資料沒有過期時間設置,而儲存在sessionStorage 裡面的資料在頁面會話結束時會被清除
相關推薦:

Android自訂環形LoadingView效果

Html5行動裝置獲獎無縫捲動動畫實作#

以上是Storage Event如何實現頁間通信的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!