2つのブラウザウィンドウ間通信の概要

1. localStorage
1つのウィンドウはstorageを更新し、もう1つのウィンドウはwindowオブジェクトのstorageイベントを傍受して通信を実現します.
注意:両方のウィンドウは同じソースでなければなりません(URLのプロトコル、ドメイン名、ポート番号は同じです).

//      storage
localStorage.setItem('name', 'jim');

//       storage  
window.addEventListener('storage', (e)=>{
    console.log('e', e)
    console.log('newValue', e.newValue)
})

2. WebSocket
すべてのWebSocketは同じサーバアドレスを傍受し、sendを利用してメッセージを送信し、onmessageを利用してメッセージの変化を取得し、ウィンドウにまたがるだけでなく、ブラウザにもまたがることができ、互換性が最もよく、サーバリソースを消費する必要があります.

let ws = new WebSocket('ws://localhost:3000/');
ws.onopen = (e) => {
    //               ，          
    ws.send({name: 'jim'}); //          
}

ws.onmessage = (e) => {
    //     
    console.log(e.data);
}

WebSocketの詳細
3. postMessage
詳細は、postMessage
4. window.name
ブラウザウィンドウにwindowがあります.nameプロパティ.この属性の最大の特徴は、同じソースであるかどうかにかかわらず、同じウィンドウで前のページにこの属性を設定すれば、後のページで読み取ることができることです.
詳細は以下を参照してください:window.name