useLocalStorage组合函数封装localStorage读写逻辑，支持响应式、类型安全、错误降级与SSR兼容。
在组合式函数中管理本地存储（localStorage）数据，核心是把读写逻辑封装成可复用、响应式、带错误处理的函数，同时避免硬编码键名和手动同步状态。
封装 localStorage 读写逻辑
不要在每个组件里重复写 localStorage.getItem 和 setItem。直接封装一个组合函数，比如 useLocalStorage：
- 接收键名（key）和默认值（defaultValue），返回响应式 ref
- 初始化时从 localStorage 读取，解析 JSON；若失败则用默认值
- 监听 ref 变化，自动同步到 localStorage（注意防抖或判等，避免无意义写入）
- 捕获 Storage API 错误（如超出配额、跨域限制），降级为内存缓存并提示
保持响应式与自动同步
用 ref 包裹值，确保模板和逻辑能响应变化；同时用 watch 监听 ref 更新并写入 localStorage：
- 写入前做浅比较（
JSON.stringify(newVal) !== JSON.stringify(oldVal)），防止重复序列化 - 对非对象/数组类型（如字符串、数字）可直接存；复杂数据建议统一 JSON 序列化
- 避免在服务端渲染（SSR）环境执行 localStorage 操作——加
if (typeof window !== 'undefined')判断
支持类型安全与默认值回退
配合 TypeScript 使用泛型，让返回的 ref 具备明确类型：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 函数签名类似：
function useLocalStorage<T>(key: string, defaultValue: T): Ref<T> - 解析失败时返回 defaultValue，不抛错，保证组件健壮性
- 可选支持“清除”方法、订阅变更事件（如 emit change），便于调试或联动
实际使用示例
比如保存用户主题偏好：
在composables/useTheme.ts 中：
import { ref, watch, onMounted } from 'vue'<br>export function useTheme() {<br> const theme = useLocalStorage<string>('app-theme', 'light')<br> const toggle = () => { theme.value = theme.value === 'light' ? 'dark' : 'light' }<br> return { theme, toggle }<br>}
组件中直接解构使用，修改 theme.value 就会自动持久化。
