useLocalStorage Hook 通过 ref 封装响应式数据，用 watchEffect 自动同步至 localStorage，并支持默认值、JSON 解析、clear 方法及 storage 事件监听实现跨标签页更新。
直接封装一个响应式、自动同步的 useLocalStorage Hook，核心是让数据读取、写入、清除都围绕一个 ref 展开，并用 watchEffect 实现写入自动触发，同时处理初始化和类型安全。
基础响应式封装（支持默认值与自动同步）
这是最常用也最稳妥的实现方式，适用于绝大多数场景：
- 从 localStorage 读取初始值，解析 JSON；若为空或解析失败，则使用传入的默认值
- 用
ref包裹该值，使其成为响应式数据源 - 用
watchEffect监听 ref 变化，自动序列化并写入 localStorage - 额外暴露
clear方法，用于删除键并重置本地 ref 值
代码示例（保存为 @/composables/useLocalStorage.ts）：
export function useLocalStorage
const data = ref
const raw = localStorage.getItem(key);
if (raw !== null) {
try {
data.value = JSON.parse(raw) as T;
} catch (e) {
console.warn(`Failed to parse localStorage item "${key}"`, e);
}
}
watchEffect(() => {
localStorage.setItem(key, JSON.stringify(data.value));
});
const clear = () => {
localStorage.removeItem(key);
data.value = defaultValue;
};
return { data, clear };
}
增强版：支持 sessionStorage + 存储类型动态选择
如果项目中同时用到 localStorage 和 sessionStorage，可扩展为统一接口：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 增加
storageType参数（'localStorage'或'sessionStorage'） - 内部通过
window[storageType]动态调用对应 API - 仍保持响应式绑定与自动写入逻辑不变
这样一处封装，两处复用，避免重复造轮子。
注意边界情况：跨标签页更新不同步怎么办？
localStorage 本身不触发当前页面的响应式更新——比如用户在另一个标签页修改了同一 key，本页的 data.value 不会自动变。解决方法：
- 监听
storage事件，在 key 匹配时手动更新data.value - 加上
onBeforeUnmount清理事件监听，防止内存泄漏 - 注意：仅监听同源下其他标签页的变更，当前页写入不会触发自身事件
只需在上面基础版中追加几行：
const handleStorageChange = (e: StorageEvent) => {if (e.key === key && e.storageArea === localStorage) {
try {
data.value = e.newValue ? JSON.parse(e.newValue) : defaultValue;
} catch {
data.value = defaultValue;
}
}
};
window.addEventListener('storage', handleStorageChange);
onBeforeUnmount(() => {
window.removeEventListener('storage', handleStorageChange);
});
配合 Pinia 使用：持久化部分 state
如果已用 Pinia 管理全局状态，不建议每个模块都手写 useLocalStorage。更推荐：
- 安装
pinia-plugin-persistedstate - 在 defineStore 中声明
persist: true或精细配置哪些字段要持久化 - 对需要响应式缓存但又不想进 store 的轻量配置（如 UI 主题、表单草稿），仍用 useLocalStorage 更灵活
两者不是互斥关系，而是分层协作：Pinia 管业务状态，useLocalStorage 管局部、临时、UI 相关的状态。
