問(wèn)題描述

舉了例子：

我同時(shí)打開了a和b兩個(gè)頁(yè)面，我聚焦在a上，并進(jìn)行一些操作，讓a頁(yè)面上的js處理我的操作并將數(shù)據(jù)發(fā)送到旁邊的b頁(yè)面。此時(shí)b頁(yè)面就能在不刷新、不經(jīng)過(guò)服務(wù)器的情況下接收到這些數(shù)據(jù)并作出反饋。類似于在百度音樂(lè)pc網(wǎng)頁(yè)版聽歌的時(shí)候，如果已經(jīng)打開了百度音樂(lè)盒頁(yè)面和列表頁(yè)，我在列表頁(yè)點(diǎn)一首歌曲的“播放”按鈕時(shí)，旁邊的音樂(lè)盒頁(yè)面就可以自動(dòng)開始播放那首音樂(lè)，而不需要打開新頁(yè)面。

總覺得用cookie什么的干這事有些雞肋。

問(wèn)題解答

這是一道阿里的面試題，方法很多。利用localstorage的storage事件可以通訊；shadredworker也可以解決；還有就是用websocket。

如果你能控制ab的頁(yè)面甚至決定URL: sharedworker / localstorage / sessionstorage 都可以用

<ul><li><a href='http://www.4tl426be.cn/song-1' target='player'>song-1</a></li><li><a href='http://www.4tl426be.cn/song-2' target='player'>song-2</a></li><li><a href='http://www.4tl426be.cn/song-3' target='player'>song-3</a></li></ul>

屬性target='framename'表示在指定的框架(頁(yè)面)中打開鏈接.可以實(shí)現(xiàn):點(diǎn)擊添加商品到購(gòu)物車時(shí),如果購(gòu)物車頁(yè)面已經(jīng)打開,則只刷新該頁(yè)面,而不是打開新的購(gòu)物車頁(yè)面.點(diǎn)擊播放歌曲時(shí),如果播放器頁(yè)面已經(jīng)打開,則只刷新該頁(yè)面,而不是打開新的播放器頁(yè)面.

提示下思路：瀏覽器同時(shí)打開兩個(gè)同域名的網(wǎng)頁(yè)，他們的localStorage是共享的，不僅如此，他們之間的localStorage值改變也是可以監(jiān)聽的。同域的a和b兩個(gè)頁(yè)面，a頁(yè)面發(fā)生localStorage.set(’abc’, 123)，b頁(yè)面可以通過(guò)如下方式監(jiān)聽變化：

window.addEventListener('storage', function(e){ console.log(’key:’, e.key); // 'abc' console.log(’oldValue:’, e.oldValue); // null console.log(’newValue:’, e.newValue); // 123});