要點：
- 數據存儲
- 兩屏之間的通信
存儲
- Cookie 受同源策略限制，支持多標籤頁數據共享，大小4KB左右，視瀏覽器而定
- LocalStorage 受同源策略限制，支持多標籤頁數據共享，存儲數據量大概幾M，視瀏覽器而定
- SessionStorage 受同源策略限制，單標籤頁數據，存儲數據量大概幾M，視瀏覽器而定
- IndexedDB 受同源策略限制，能夠存儲較大的數據量
通信
- websoket 需要一個服務端做中轉，可跨源通信
- window.postMessage() 一個窗口需要獲得另一個窗口的引用，可跨源通信
- Web Worker 沒能實現多標籤頁數據共享，不能通過上述存儲方式共享數據
- window.onstorage 通過LocalStorage存儲實現共享
結論
- websoket能實現雙屏數據共享，從而實現標題的效果，不過因爲要寫個服務端中轉，暫時不考慮此方案。
- Web Worker 沒能實現多標籤頁數據共享。
- window.postMessage() 可在兩窗口之間通信，代碼相對簡單，不過體驗不太好。
- 相對來講，在數據量不大的情況下，window.onstorage 和LocalStorage來實現分屏異顯更好點
代碼
結論3：
//頁面1
<body>
<h1 onclick="openNewWindow()">頁面1</h1>
<button onclick="sendMsg()">發送消息</button>
<script>
let newWindow;
function openNewWindow() {
newWindow = window.open('b.html', '_blank', 'fullscreen=yes')
}
function sendMsg() {
if (newWindow) {
newWindow.postMessage('數據', '*');
}
}
</script>
</body>
//頁面2
<body>
<h1>頁面2</h1>
<script>
window.addEventListener("message", (evt) => {
if (evt.origin !== "url") {//判斷消息源是否可信任
}
console.log(evt)
}, false);
</script>
</body>
結論4：
//頁面1
<body>
<h1>頁面1</h1>
<script>
localStorage.setItem("data", "1234")
</script>
</body>
//頁面2
<body>
<h1>頁面2</h1>
<script>
window.onstorage = (e) => { console.log(e) }
</script>
</body>
最後， 除了方案一，三和四隻能在同一瀏覽器中運行。方案一的實現流程可參閱這篇博客