浏览器内多标签页同步内容

最简单的是通过广播订阅实现同浏览器之间的消息同步这不是唯一解胜在好用原生支持。它生效在同一个浏览器中不过不同浏览器之前一般不涉及消息同步那需要依靠服务端!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title跨标签页同步Demo/title/headbody!-- 唯一元素文本域 --textareaideditorrows20cols80placeholder在此输入.../textareascript// 获取文本域元素、创建一个叫做text-sync-demo的广播订阅、以及生成当前标签页的标识consttextareadocument.getElementById(editor);constchannelnewBroadcastChannel(text-sync-demo);constsessionIdDate.now().toString(36);letisComposingfalse;// 聚合状态标志// 发送消息的方法广播文本内容带发送者IDfunctionbroadcast(text){channel.postMessage({type:update,text:text,sender:sessionId});}// 1. 聚合事件中文输入法开始/结束textarea.addEventListener(compositionstart,(){isComposingtrue;});textarea.addEventListener(compositionend,(e){isComposingfalse;// 组合结束后立即发送最终文本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(typeupdatesender!sessionId){textarea.valuetext;}elseif(typerequest-statesender!sessionIdtextarea.value){// 其他标签页请求当前文本回复一条更新broadcast(textarea.value);}};/script/body/html