javascript - js Gibt es eine elegante Möglichkeit, zwischen zwei gleichzeitig geöffneten Tabs zu kommunizieren?

Question

Geben Sie ein Beispiel:

Ich habe zwei Seiten a und b gleichzeitig geöffnet, mich auf a konzentriert und einige Vorgänge ausgeführt, wobei ich die js auf Seite a meine Vorgänge verarbeiten und die Daten an Seite b daneben senden ließ. Zu diesem Zeitpunkt kann Seite B diese Daten empfangen und Feedback geben, ohne den Server zu aktualisieren oder zu durchlaufen. Ähnlich wie beim Anhören von Songs in der Baidu Music PC-Webversion: Wenn die Baidu Music Box-Seite und die Listenseite geöffnet sind und ich auf der Listenseite auf die Schaltfläche „Play“ eines Songs klicke, wird die Music Box-Seite daneben angezeigt Die Musik kann automatisch abgespielt werden, ohne dass eine neue Seite geöffnet werden muss.

Ich habe immer das Gefühl, dass die Verwendung von Cookies oder ähnlichem etwas nutzlos ist.

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
});