javascript - js 有什麼優雅的辦法實現在同時打開的兩個標籤頁間相互通信？

Question

舉了例子：

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

總覺得用cookie什麼的幹這事有些雞肋。

Answer 1

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

Answer 2

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

Answer 3

<ul>
<li><a href="/song-1" target="player">song-1</a></li>
<li><a href="/song-2" target="player">song-2</a></li>
<li><a href="/song-3" target="player">song-3</a></li>
</ul>

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

Answer 4

提示下思路：
瀏覽器同時打開兩個同網域的網頁，他們的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
});