推荐用自定义 hook 封装 localstorage 逻辑，实现 usestorage 组合函数，接收 key 和默认值，返回响应式 data、setdata 和 clear 方法，自动同步读写删并支持 json 与基础类型。
直接在 setup 中封装本地存储逻辑，推荐用自定义 Hook（即组合函数），把 localStorage 的读、写、删、清空能力抽离成可复用、带响应式支持的函数。
定义 useStorage 组合函数
创建一个 useStorage 函数，接收 key 和默认值，返回响应式的值及 setter/clearer 方法。核心是用 ref 包裹数据，并同步到 localStorage；同时监听 ref 变化，自动持久化。
- 读取时优先从 localStorage 解析，失败则用默认值
- 写入时先更新 ref，再存入 localStorage（字符串化）
- 删除时清空对应 key，并将 ref 重置为默认值
- 支持 JSON 类型自动序列化/反序列化，基础类型（string/number/boolean）也兼容
基础实现示例
以下是一个轻量、健壮的 useStorage 实现：
import { ref, watch } from 'vue'
export function useStorage(key, initialValue) {
// 从 localStorage 读取并解析
let storedValue
try {
const item = localStorage.getItem(key)
storedValue = item ? JSON.parse(item) : initialValue
} catch (e) {
storedValue = initialValue
}
const data = ref(storedValue)
// 写入 localStorage
const setData = (value) => {
data.value = value
}
// 监听响应式数据变化并持久化
watch(data, (newValue) => {
try {
localStorage.setItem(key, JSON.stringify(newValue))
} catch (e) {
console.warn(`Failed to save ${key} to localStorage`, e)
}
}, { immediate: true })
// 删除该 key
const clear = () => {
localStorage.removeItem(key)
data.value = initialValue
}
return {
data,
setData,
clear
}
}
在 setup 中使用
在组件的 setup() 里直接调用，获得响应式状态和操作方法：
import { useStorage } from './useStorage'
export default {
setup() {
const { data: userName, setData: setUserName, clear: clearName } = useStorage('user-name', '')
const { data: theme, setData: setTheme } = useStorage('app-theme', 'light')
const handleLogin = () => {
setUserName('Alice')
setTheme('dark')
}
const handleLogout = () => {
clearName()
}
return {
userName,
theme,
handleLogin,
handleLogout
}
}
}
模板中可直接绑定 userName 或 theme，修改它们会自动同步到 localStorage。
增强建议：支持 sessionStorage 和类型提示
如需扩展，可让 useStorage 接收第三个参数 storageType = 'localStorage'，动态选择 localStorage 或 sessionStorage；TypeScript 用户可补充泛型约束，确保初始值与返回 data 类型一致。
不复杂但容易忽略：避免在服务端渲染（SSR）环境直接访问 localStorage —— 可加 if (typeof window !== 'undefined') 安全判断，或在 onMounted 后初始化。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
