Composition API 如何在组合式函数中处理浏览器存储（LocalStorage）同步

Composition API 本身不处理跨标签页同步，但可通过封装组合式函数整合 localStorage 读写、响应式更新与 storage 事件监听，实现本地响应式与跨页同步；推荐 useSharedRef 或 VueUse 的 useStorage，并注意 JSON 序列化、防抖、浅比较及双通道兜底。

Composition API 本身不处理跨标签页同步，但可以通过封装组合式函数，把 localStorage 读写、响应式更新、storage 事件监听三者有机整合，实现“本地响应式 + 跨页同步”的效果。关键不是让 Vue 自动同步，而是用函数主动桥接。

用 useSharedRef 封装双向绑定逻辑

这是最常用也最清晰的模式：一个组合函数同时管理 ref 响应式状态和 localStorage 持久化。

1. 初始化时从 localStorage 读取值（有 fallback），赋给 ref
2. ref 改变时，自动写入 localStorage（JSON 序列化）
3. 监听全局 storage 事件，只对匹配 key 的变更反序列化并更新 ref
4. 注意：当前页写入不会触发自己的 storage 事件，所以必须在 setItem 后手动更新 ref —— 这步不能省

避免无限循环和类型陷阱

localStorage 只支持字符串，且 storage 事件没有原子性，容易出错。

1. 写入前做浅比较：newVal !== JSON.stringify(oldVal)，防止无意义触发
2. 只传可 JSON 化的数据（避开 Date、RegExp、undefined、function）
3. 不要在 storage 回调里直接调用 setItem；若需更新，先改 ref，再判断是否真要持久化
4. 高频操作（如输入框实时存）建议加防抖，localStorage 是同步阻塞操作

借助 VueUse 的 useStorage 快速落地

如果你不需要自定义同步逻辑，@vueuse/core 提供了开箱即用的 useStorage。

1. 它内部已处理了 ref 绑定、JSON 序列化、storage 事件监听
2. 支持默认值、自定义序列化器（比如用 msgpack 替代 JSON）
3. 跨标签页同步需额外加一层逻辑：useStorage 默认只监听 storage 事件，但不保证所有页面都用同一套封装 —— 所以团队内要统一使用，或配合 useSharedRef 自行增强
4. 示例：const theme = useStorage('theme', 'light')，修改 theme.value 即同步到 localStorage 并通知其他页

补充：需要跨域或更可靠同步时换方案

localStorage + storage 事件只适用于同源多标签页，且不保证送达。

1. 要求更高可靠性？用 BroadcastChannel（同源标签页广播，Safari 14.1+ 支持稳定）
2. 要跨 iframe 或跨域？只能用 postMessage + 父子窗口通信
3. 核心数据建议加兜底：localStorage 写入后，再发一次 BroadcastChannel 消息，双通道保障