H5 標準新增的本地儲存 localStorage 已經很熟悉了，但是還有個 storage 事件監聽確實比較陌生，這個事件可以通過更新 localstorage 來觸發，而且當前在同一個瀏覽器下開啟的所有同源頁面都可以監聽得到！下面我們就來具體瞭解一下：

一、Storage事件介紹

1、storage 事件

　　在某些複雜情況下，如果多個頁面都需要訪問本地儲存的資料，就需要在儲存區域的內容發生改變時，能夠通知相關的頁面。

　　Web Storage API 內建了一套事件通知機制，當儲存區域的內容發生改變（包括增加、修改、刪除資料）時，就會自動觸發 storage 事件，並把它傳送給所有感興趣的監聽者

if (window.addEventListener) {
    window.addEventListener("storage", handleStorage, false);
}
// handleStorage 回撥函式接受一個 StorageEvent 引數
function handleStorage(e) {
    ......
}

　　此時，變數 e 就是一個 StorageEvent 物件，這個物件有很多有用的屬性。

2、StorageEvent 物件介紹

　　storage 事件的處理函式接受的 event 事件物件也和通常的事件物件不同，這些屬性如下：

//StorageEvent物件
{
    bubbles: false,
    cancelBubble: false,
    cancelable: false,
    composed: false,
    currentTarget: {...}, //當前Window物件
    defaultPrevented: false,
    eventPhase: 0,
    isTrusted: true,
    key: "tabs",//
 
更新的item鍵名
    newValue: "1",//更新後的item鍵值
    oldValue: "2",//更新前的item鍵值
    path: [Window],//一個數組，陣列中有一個元素，為當前Window物件
    returnValue: true,
    srcElement: {...}, //當前Window物件
    storageArea: {...}, //Storage物件
    target:{...}, //當前Window物件
    timeStamp: 101647.2000000067,
    type: "storage",
    url: "http://www.localhost.com/list.html",//更新localStorage的頁面
    __proto__: StorageEvent
}

　　我們常用的有如下幾個重要的屬性，通過這些屬性我們可以做很多操作，例如頁面之間互相傳值，統計當前開啟的頁面數量（限同源頁面）等。

3、注意點：需要注意的是

（1）只有在資料的內容確實發生改變的時候，才會觸發 storage 事件。如果把一個值設定成一模一樣的值，或刪除一個根本就不存在的儲存項，則不會觸發 storage 事件。

（2）並且，storage 事件只會傳送給同源、而且處於開啟狀態的其它頁面，而不會發送給觸發改變的頁面本身及處於關閉狀態的頁面。

二、storage 事件應用

　　QQ音樂的主頁是 https://y.qq.com，而實際播放的頁面是 https://y.qq.com/n/ryqq/player。當你在其他頁面（我們隨便選一個歌單列表：https://y.qq.com/n/ryqq/playlist/7777601718）點選播放或者新增的時候，你會發現https://y.qq.com/n/ryqq/player 裡的歌曲播放狀態會實時的變化。

　　那我們就來探究一下 QQ 音樂的實現。

　　點選播放歌曲的時候，在 player 頁面即播放頁面捕獲的資料。這就完全驗證了 QQ音樂這個新增音樂的實現就是基於 storage 事件來完成的。