最推荐的方式是封装 uselocalstorage 组合式函数，统一处理读写、响应式绑定、异常捕获及命名空间、过期时间等扩展能力。
用组合式函数封装 useLocalStorage
最推荐的方式是写一个 useLocalStorage 组合式函数，把读、写、响应式绑定和错误处理都收拢在一起。它返回一个 ref 响应式变量和可选的清除方法，直接在组件中解构使用：
- 初始化时自动从 localStorage 读取，并做 JSON 解析（支持对象、数组、布尔值等）
- 值变更时通过 watchEffect 自动序列化并写入，无需手动监听
- 默认值支持传入任意类型，避免 undefined 或 null 导致逻辑异常
- 内部处理了 JSON 解析失败、存储超限等常见异常，不中断主线程
示例代码（/src/composables/useLocalStorage.js）：
import { ref, watchEffect } from 'vue'
<p>export default function useLocalStorage(key, defaultValue) {
let raw = null
try {
const item = localStorage.getItem(key)
raw = item ? JSON.parse(item) : null
} catch (e) {
console.warn(<code>[useLocalStorage] 解析 ${key} 失败</code>, e)
}</p><p>const data = ref(raw !== null ? raw : defaultValue)</p><p>watchEffect(() => {
try {
localStorage.setItem(key, JSON.stringify(data.value))
} catch (e) {
console.error(<code>[useLocalStorage] 写入 ${key} 失败</code>, e)
}
})</p><p>const clear = () => {
localStorage.removeItem(key)
data.value = defaultValue
}</p><p>return [data, clear]
}</p>
加命名空间和前缀避免冲突
多个模块或团队共用 localStorage 时，容易因 key 重名互相覆盖。可以在封装层统一加前缀，比如 vue_app_：
- 所有 key 自动拼接前缀：
localStorage.setItem('vue_app_theme', ...) - 读取时也带前缀匹配，不影响其他应用或库的存储项
- 支持按模块设置子命名空间，例如
vue_app_user::settings
这样既保持项目内 key 的语义清晰，又规避跨应用污染风险。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章