如何用 Shared Worker 实现跨浏览器标签页的全局状态共享

张开发
• 2026/4/16 1:26:01 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何用 Shared Worker 实现跨浏览器标签页的全局状态共享
Shared Worker 可实现同源多标签页共享后台线程与状态需单独部署脚本、手动维护 state 并通过 MessagePort 通信不支持 DOM 但可调用 fetch/IndexedDB须 HTTPS、注意 Safari 兼容性及持久化补充。Shared Worker 可以让多个浏览器标签页、iframe 甚至不同窗口共享同一个后台线程从而实现轻量级的跨标签页状态同步。但它不能直接替代 localStorage 或 BroadcastChannel而更适合需要统一逻辑处理、避免重复请求或协调复杂状态变更的场景。Shared Worker 的基本工作原理Shared Worker 是一个独立于页面生命周期运行的脚本由所有同源页面共同连接。每个页面通过 new SharedWorker() 创建连接Worker 内部用 onconnect 接收端口MessagePort再通过端口双向通信。关键点必须同源协议 域名 端口完全一致 Worker 脚本需单独部署为一个 .js 文件不能是内联脚本 页面关闭时自动断开连接但 Worker 实例可继续运行直到所有连接关闭 不支持访问 DOM、window 或 document只能操作全局作用域和 Web API如 fetch、IndexedDB实现全局状态共享的核心结构Shared Worker 本身没有内置状态管理需手动维护一个共享对象并通过消息机制同步更新。推荐结构如下 Tellers AI Tellers是一款自动视频编辑工具可以将文本、文章或故事转换为视频。

更多文章