前言

在開(kāi)發(fā)管理后臺(tái)頁(yè)面的時(shí)候，會(huì)遇到這樣一種需求：有一個(gè)列表頁(yè)面，一個(gè)新增按鈕，一個(gè)新增頁(yè)面，點(diǎn)擊新增按鈕，在一個(gè)新的標(biāo)簽頁(yè)中打開(kāi)新增頁(yè)面。并且，新增后要自動(dòng)實(shí)時(shí)的更新列表頁(yè)面的數(shù)據(jù)。

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

上干貨

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


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

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

可以寫(xiě)一個(gè)通用的js，這個(gè)js只需要實(shí)現(xiàn)兩個(gè)函數(shù)。一個(gè)用來(lái)發(fā)送消息，一個(gè)用來(lái)監(jiān)聽(tīng)消息。

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

思路：

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

前面說(shuō)了，只有某個(gè)key的value值改變了才會(huì)觸發(fā)，那么多次新增一樣的數(shù)據(jù)，就不會(huì)觸發(fā)，所以需要給保存的數(shù)據(jù)附加一個(gè)隨機(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)聽(tīng)消息的函數(shù)

思路：

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

/*** @description: 監(jiān)聽(tīng)消息* @param {*} handle 回調(diào)函數(shù)* @return {*} 取消監(jiān)聽(tīng)的函數(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)}
}

來(lái)測(cè)試一下

test.html

index.html

看看效果

不得不說(shuō)，真是太妙了！