javascript - js Existe-t-il un moyen élégant de communiquer entre deux onglets ouverts en même temps ?

Question

Donnez un exemple :

J'ai ouvert deux pages a et b en même temps. Je me suis concentré sur a et j'ai effectué quelques opérations, laissant le js de la page a traiter mes opérations et envoyer les données à la page b à côté. À ce stade, la page b peut recevoir ces données et donner son avis sans actualiser ni passer par le serveur. Semblable à l'écoute de chansons sur la version Web de Baidu Music PC, si la page Baidu Music Box et la page de liste ont été ouvertes, lorsque je clique sur le bouton « Lecture » ​​d'une chanson sur la page de liste, la page de boîte à musique à côté de il peut automatiquement commencer à jouer cette musique sans ouvrir une nouvelle page.

J'ai toujours l'impression qu'utiliser des cookies ou quelque chose pour faire ça est un peu inutile.

Answer 1

Il s'agit d'une question d'entretien avec Alibaba avec de nombreuses méthodes. La communication peut être réalisée en utilisant l'événement de stockage de localstorage ; shadredworker peut également résoudre le problème et websocket peut également être utilisé ;

Answer 2

Si vous pouvez contrôler la page ab et même décider de l'URL : sharedworker / localstorage / sessionstorage peuvent être utilisés

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>

L'attribut target="framename" signifie ouvrir le lien dans le cadre (page) spécifié
Peut être réalisé :
Lorsque vous cliquez pour ajouter des articles au panier, si la page du panier est déjà ouverte, actualisez uniquement la page. au lieu d'en ouvrir une nouvelle Page du panier.
Lorsque vous cliquez pour lire une chanson, si la page du joueur est déjà ouverte, seule la page sera actualisée au lieu d'ouvrir une nouvelle page du joueur.

Answer 4

Voici une idée :
Le navigateur ouvre deux pages Web avec le même nom de domaine en même temps. Leurs pages localStorage是共享的，不仅如此，他们之间的localStorage值改变也是可以监听的。同域的a和b两个页面，a页面发生localStorage.set('abc', 123) et b peuvent surveiller les modifications des manières suivantes :

.

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