浏览器内多标签页同步内容
最简单的是通过广播订阅实现同浏览器之间的消息同步，这不是唯一解，胜在好用，原生支持。它生效在同一个浏览器中，不过不同浏览器之前一般不涉及消息同步，那需要依靠服务端
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>跨标签页同步Demo</title></head><body><!-- 唯一元素：文本域 --><textareaid="editor"rows="20"cols="80"placeholder="在此输入..."></textarea><script>// 获取文本域元素、创建一个叫做text-sync-demo的广播订阅、以及生成当前标签页的标识consttextarea=document.getElementById('editor');constchannel=newBroadcastChannel('text-sync-demo');constsessionId=Date.now().toString(36);letisComposing=false;// 聚合状态标志// 发送消息的方法，广播文本内容，带发送者IDfunctionbroadcast(text){channel.postMessage({type:'update',text:text,sender:sessionId});}// 1. 聚合事件：中文输入法开始/结束textarea.addEventListener('compositionstart',()=>{isComposing=true;});textarea.addEventListener('compositionend',(e)=>{isComposing=false;// 组合结束后立即发送最终文本broadcast(textarea.value);});// 2. 修改事件：普通输入（非组合状态）textarea.addEventListener('input',()=>{if(!isComposing){broadcast(textarea.value);}});// 初始化时尝试从其他标签页恢复内容channel.postMessage({type:'request-state',sender:sessionId});channel.onmessage=(event)=>{const{type,text,sender}=event.data;// 排除自身，同步文本域内容if(type==='update'&&sender!==sessionId){textarea.value=text;}elseif(type==='request-state'&&sender!==sessionId&&textarea.value){// 其他标签页请求当前文本，回复一条更新broadcast(textarea.value);}};</script></body></html>