Vue 3 中逻辑复用怎么封装本地存储读写操作-Vue.js-PHP中文网

最推荐的方式是封装 useLocalStorage 组合式函数，统一处理读写、响应式绑定、异常捕获及命名空间、过期时间等扩展能力。

vue 3 中逻辑复用怎么封装本地存储读写操作

用组合式函数封装 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]
}

加命名空间和前缀避免冲突

多个模块或团队共用 localStorage 时，容易因 key 重名互相覆盖。可以在封装层统一加前缀，比如 vue_app_：

立即学习“前端免费学习笔记（深入）”；

vue-composition-api-best-practices

Vue 3 组合式 API 与

相关专题

python是前端还是后端

Python属于前端也属于后端，其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容，供大家免费下载体验。

2543

2023.08.11

前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍：1、WebSocket，它可以在客户端和服务器之间建立持久连接，实现实时的双向通信，前端可以使用 WebSocket API来创建WebSocket连接，并通过发送和接收消息来实现即时通讯；2、Long Polling，是一种模拟实时通信的技术等等。

5503

2023.10.09

前端和后端的区别

前端关注的是用户界面的设计和交互，而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容，可以阅读本专题下面的文章。

6530

2024.03.19

php和前端的关联介绍

php既可以作为前端语言，也可以作为后端语言。想了解更多php和前端的相关内容，可以阅读本专题下面的文章。

6158

2024.03.22

前端外包工作内容有哪些

前端外包工作内容包括：1. 网站和应用程序开发；2. 用户界面和交互设计；3. 用户体验优化；4. 设计和视觉开发；5. 跨浏览器兼容性；6. 性能优化；7. 维护和更新；8. 项目管理和沟通。想了解更多前端的相关内容，可以阅读本专题下面的文章。

883

2024.05.22

vue2.0和3.0区别

vue2.0和3.0区别：vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现，vue3中使⽤了es6的proxy API对数据代理，实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容，供大家免费下载体验。

1694

2023.07.17

vue3的生命周期有哪些

vue3的生命周期：1、beforecreate；2、created；3、beforemount；4、mounted；5、beforeupdate；6、updated；7、beforedestroy；8、destroyed；9、activated；10、deactivated等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

12142

2024.02.23