javascript - js Adakah terdapat cara yang elegan untuk berkomunikasi antara dua tab yang dibuka pada masa yang sama?

Question

Berikan contoh:

Saya membuka dua halaman a dan b pada masa yang sama saya memfokuskan pada a dan melakukan beberapa operasi, membiarkan js pada halaman a memproses operasi saya dan menghantar data ke halaman b di sebelahnya. Pada masa ini, halaman b boleh menerima data ini dan memberi maklum balas tanpa memuat semula atau melalui pelayan. Sama seperti semasa mendengar lagu pada versi web Baidu Music PC, jika halaman Kotak Muzik Baidu dan halaman senarai telah dibuka, apabila saya mengklik butang "Main" lagu pada halaman senarai, halaman kotak muzik di sebelah ia boleh mula memainkan muzik itu secara automatik tanpa membuka halaman baharu.

Saya selalu merasakan bahawa menggunakan kuki atau sesuatu untuk melakukan ini agak tidak berguna.

Answer 1

Ini adalah soalan wawancara Alibaba dengan banyak kaedah. Komunikasi boleh dicapai dengan menggunakan acara penyimpanan localstorage juga boleh menyelesaikan masalah itu;

Answer 2

Jika anda boleh mengawal halaman ab dan juga memutuskan URL: sharedworker / localstorage / sessionstorage boleh digunakan

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>

Atribut target="framename" bermaksud membuka pautan dalam bingkai (halaman) yang ditentukan
Boleh direalisasikan:
Apabila anda mengklik untuk menambah item ke troli beli-belah, jika halaman troli beli-belah sudah dibuka, hanya muat semula halaman tersebut. bukannya membuka halaman troli beli-belah yang baharu.
Apabila anda mengklik untuk memainkan lagu, jika halaman pemain sudah dibuka, hanya halaman itu akan dimuat semula dan bukannya membuka halaman pemain baharu.

Answer 4

Inilah idea:
Pelayar membuka dua halaman web dengan nama domain yang sama pada masa yang sama localStorage是共享的，不仅如此，他们之间的localStorage值改变也是可以监听的。同域的a和b两个页面，a页面发生localStorage.set('abc', 123) dan halaman b mereka boleh memantau perubahan dengan cara berikut:

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