shared worker 是实现多标签页共享轻量级前端 kv 数据库最直接、最可控的方案，通过同源共享线程作为中央仓库统一管理内存存储，并支持原子化操作、端口失效处理及 indexeddb 持久化兜底，但受限于 https/localhost 环境与 safari 16.4+ 兼容性。
shared worker 是实现多标签页共享轻量级前端 kv 数据库最直接、最可控的方案之一。它不依赖服务端，也不需要复杂同步协议，而是通过一个同源共享的线程作为“中央仓库”，把读写操作收口管理，让所有标签页像访问同一个内存对象一样协作。
核心结构：Worker 内建一个内存 KV 存储
Shared Worker 脚本中定义一个全局对象（如 const store = new Map() 或 const store = {}），所有连接进来的页面端口都共用这个实例。每次读写都走这个统一入口：
- 页面发送
{ type: 'set', key: 'theme', value: 'dark' }→ Worker 解析后执行store.set('theme', 'dark') - 页面发送
{ type: 'get', key: 'theme' }→ Worker 查store.get('theme')并回传结果 - 支持
del、keys、clear等基础操作，逻辑全部在 Worker 内完成
必须处理的关键问题：竞态与端口失效
纯内存存储看似简单，但两个标签页同时调用 set 可能导致覆盖或丢失。不能靠 ++ 或直接赋值，而要确保操作原子性：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 用单任务队列串行处理请求：所有
postMessage进入queue.push(req)，Worker 启动processQueue()循环逐个执行 - 每个请求带唯一
id，Worker 用Map缓存pendingRequests.set(id, { port, resolve })，操作完成后精准响应发起者 - 监听
port.onclose，及时从pendingRequests和广播列表中移除失效端口，避免port.postMessage()报错
增强可靠性：对接 IndexedDB 做持久化兜底
仅靠内存无法应对刷新、崩溃或浏览器休眠。建议在 Worker 初始化时打开 IndexedDB，并将关键键值对自动落盘：
- 首次连接时，Worker 从 DB 加载全量数据到内存
store，再广播给各页面“已同步” - 每次
set操作，Worker 同时写入内存 + 发起 IndexedDB 事务；失败时拒绝请求并通知页面重试 - 提供
{ type: 'sync' }指令，新打开的页面可主动拉取最新状态，避免本地 stale
使用限制与兼容性提醒
Shared Worker 不是万能钥匙，上线前需确认环境是否支持：
- 只在 HTTPS 或
localhost下可用，HTTP 环境静默禁用 - Safari 16.4+ 才支持（对应 iOS 16.4 / macOS 13.3 起），旧版本需 fallback 到
BroadcastChannel + localStorage时间戳选举主控页 - Worker 脚本必须是独立文件（如
/workers/kv-worker.js），不可内联；构建工具需确保路径可访问
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
