HTML5中不存在SharedStorage标准API；其为Chrome实验性广告专用API，未标准化且不被主流浏览器支持；跨页面数据共享应使用localStorage+storage事件、BroadcastChannel或postMessage等同源/受控方案。
HTML5 中并不存在 `SharedStorage` 这个标准 API。 目前（截至 2026 年 4 月），**`SharedStorage` 是 Chrome 浏览器在 Privacy Sandbox 框架下实验性推出的 API，属于跨站点广告与归因场景的专用机制，尚未成为 HTML5 标准，也不被其他主流浏览器（Firefox、Safari、Edge）支持**。它不能用于通用的跨站点用户数据存储，也不适用于优化常规 Web 应用的用户体验。 真正可用、标准化且广泛支持的跨页面/跨标签数据共享方案，仍基于同源策略下的以下技术：
同源页面间可靠共享：localStorage + storage 事件
同一域名（协议+主机+端口）下的多个页面可共用 localStorage，并通过原生 storage 事件感知变更：
- 写入方调用
localStorage.setItem('theme', 'dark') - 其他同源页监听
window.addEventListener('storage', e => {...})，获取e.key、e.newValue - 注意：该事件只在其他窗口触发，当前页 setItem 不会触发自身监听
跨标签实时协作：BroadcastChannel API
比 storage 事件更灵活、低延迟、支持任意序列化数据（不限于字符串），且同源下所有上下文（页面、iframe、Worker）均可收发：
- 创建通道：
const bc = new BroadcastChannel('ui-sync'); - 发送：
bc.postMessage({ type: 'theme-change', value: 'light' }); - 接收：
bc.addEventListener('message', e => handle(e.data)); - 关闭时记得
bc.close()避免内存泄漏
跨域但受控通信：postMessage + iframe
若需与明确信任的第三方站点（如嵌入的 SSO 登录页、支付 SDK）交换少量数据，可通过 postMessage 安全通信：
- A 页面加载
- A 调用
iframe.contentWindow.postMessage(data, 'https://partner.com') - B 页面监听
window.addEventListener('message', e => { if (e.origin === 'https://your.com') {...} }) - 必须校验
e.origin，禁止使用'*'
真正需要“跨站点”持久存储？请重新评估需求
浏览器出于隐私保护，不允许网站直接读写其他站点的存储空间。所谓“跨站点数据共享”，实际应转化为：
- 后端中台统一管理：用户数据存服务端，前端各站点通过 OAuth 或 JWT 获取授权后拉取
-
第一方 Cookie + SameSite 策略：在自有子域（如
app.example.com和shop.example.com）间共享 Cookie，配合SameSite=Lax - IndexedDB + 同源封装：不跨域，但可在 PWA 离线场景下提供结构化、大容量本地缓存
不复杂但容易忽略：把“跨站点”当作技术目标，往往掩盖了真实问题——多数体验优化（如主题同步、登录态、多端草稿）完全可通过服务端协调或同源广播解决，强行突破同源限制既不可行，也不安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
