Vue Composition API如何在组合式函数中管理本地存储数据

useLocalStorage组合函数封装localStorage读写逻辑，支持响应式、类型安全、错误降级与SSR兼容。

在组合式函数中管理本地存储（localStorage）数据，核心是把读写逻辑封装成可复用、响应式、带错误处理的函数，同时避免硬编码键名和手动同步状态。

封装 localStorage 读写逻辑

不要在每个组件里重复写 localStorage.getItem 和 setItem。直接封装一个组合函数，比如 useLocalStorage：

1. 接收键名（key）和默认值（defaultValue），返回响应式 ref
2. 初始化时从 localStorage 读取，解析 JSON；若失败则用默认值
3. 监听 ref 变化，自动同步到 localStorage（注意防抖或判等，避免无意义写入）
4. 捕获 Storage API 错误（如超出配额、跨域限制），降级为内存缓存并提示

保持响应式与自动同步

用 ref 包裹值，确保模板和逻辑能响应变化；同时用 watch 监听 ref 更新并写入 localStorage：

1. 写入前做浅比较（JSON.stringify(newVal) !== JSON.stringify(oldVal)），防止重复序列化
2. 对非对象/数组类型（如字符串、数字）可直接存；复杂数据建议统一 JSON 序列化
3. 避免在服务端渲染（SSR）环境执行 localStorage 操作——加 if (typeof window !== 'undefined') 判断

支持类型安全与默认值回退

配合 TypeScript 使用泛型，让返回的 ref 具备明确类型：

1. 函数签名类似：function useLocalStorage<T>(key: string, defaultValue: T): Ref<T>
2. 解析失败时返回 defaultValue，不抛错，保证组件健壮性
3. 可选支持“清除”方法、订阅变更事件（如 emit change），便于调试或联动

实际使用示例

比如保存用户主题偏好：

在 composables/useTheme.ts 中：

import { ref, watch, onMounted } from 'vue'

export function useTheme() {

const theme = useLocalStorage<string>('app-theme', 'light')

const toggle = () => { theme.value = theme.value === 'light' ? 'dark' : 'light' }

return { theme, toggle }

}

组件中直接解构使用，修改 theme.value 就会自动持久化。