問題描述

舉了例子：

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

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

問題解答

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

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

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

屬性target='framename'表示在指定的框架(頁面)中打開鏈接.可以實現:點擊添加商品到購物車時,如果購物車頁面已經打開,則只刷新該頁面,而不是打開新的購物車頁面.點擊播放歌曲時,如果播放器頁面已經打開,則只刷新該頁面,而不是打開新的播放器頁面.

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

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