前言

在開發(fā)管理后臺頁面的時候，會遇到這樣一種需求：有一個列表頁面，一個新增按鈕，一個新增頁面，點擊新增按鈕，在一個新的標(biāo)簽頁中打開新增頁面。并且，新增后要自動實時的更新列表頁面的數(shù)據(jù)。

如果用Vue/React等現(xiàn)代SPA（單頁面）框架，我們很容易想到使用狀態(tài)管理庫來實現(xiàn)，但如果是兩個不同的html頁面呢，例如一個是list.html，一個是detail.html，你可能會想到使用websocket或EventSource，但這實在是有點大材小用了。

上干貨

最近看了渡一袁老師的視頻，學(xué)到一個監(jiān)聽storage事件，能夠監(jiān)聽別的標(biāo)簽頁改動了localStorage中的任何一個key。


可以看到在別的標(biāo)簽頁改變了storage中的一個key，即可觸發(fā)監(jiān)聽，并且能知道改動了哪個key，以及最新的value值。這就相當(dāng)于是一個標(biāo)簽頁往另一個標(biāo)簽頁發(fā)送消息。

有了這個，這樣我們就可以實現(xiàn)標(biāo)簽頁之間的通信了。

可以寫一個通用的js，這個js只需要實現(xiàn)兩個函數(shù)。一個用來發(fā)送消息，一個用來監(jiān)聽消息。

發(fā)送消息的函數(shù)

思路：

• 參數(shù)1：接收一個type類型，用來表示做了什么操作
• 參數(shù)2：接收一個操作的數(shù)據(jù)payload
• 函數(shù)體：用type作為key，payload作為value，保存到localStorage
• 返回值：無

前面說了，只有某個key的value值改變了才會觸發(fā)，那么多次新增一樣的數(shù)據(jù)，就不會觸發(fā)，所以需要給保存的數(shù)據(jù)附加一個隨機(jī)數(shù)。

/*** @description: 發(fā)送消息* @param {*} type 操作類型* @param {*} payload 操作的數(shù)據(jù)* @return {*} null*/
export function sendMsg(type, payload) {localStorage.setItem(type, JSON.stringify({payload,temp: +new Date()}))
}

監(jiān)聽消息的函數(shù)

思路：

• 參數(shù)：接收一個回調(diào)函數(shù)
• 函數(shù)體：監(jiān)聽storage事件，將監(jiān)聽到的數(shù)據(jù)回傳給回調(diào)函數(shù)
• 返回值：返回一個函數(shù)用來取消監(jiān)聽

/*** @description: 監(jiān)聽消息* @param {*} handle 回調(diào)函數(shù)* @return {*} 取消監(jiān)聽的函數(shù)*/
export function listenMsg(handle) {const storageHandler = (e) => {const data = JSON.parse(e.newValue)handle(e.key, data.payload)}window.addEventListener('storage', storageHandler)return () => {window.removeEventListener('storage', storageHandler)}
}

來測試一下

test.html

index.html

看看效果

不得不說，真是太妙了！