利用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 裏面的數據在頁面會話結束時會被清除