useLocalStorage Hook 通过 ref 封装响应式数据，用 watchEffect 自动同步至 localStorage，并支持默认值、JSON 解析、clear 方法及 storage 事件监听实现跨标签页更新。

直接封装一个响应式、自动同步的 useLocalStorage Hook，核心是让数据读取、写入、清除都围绕一个 ref 展开，并用 watchEffect 实现写入自动触发，同时处理初始化和类型安全。

基础响应式封装（支持默认值与自动同步）

这是最常用也最稳妥的实现方式，适用于绝大多数场景：

• 从 localStorage 读取初始值，解析 JSON；若为空或解析失败，则使用传入的默认值
• 用 ref 包裹该值，使其成为响应式数据源
• 用 watchEffect 监听 ref 变化，自动序列化并写入 localStorage
• 额外暴露 clear 方法，用于删除键并重置本地 ref 值

代码示例（保存为 @/composables/useLocalStorage.ts）：

import { ref, watchEffect, onBeforeUnmount } from 'vue';
export function useLocalStorage(key: string, defaultValue: T) {
const data = ref(defaultValue);
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，可扩展为统一接口：

• 增加 storageType 参数（'localStorage' 或 'sessionStorage'）
• 内部通过 window[storageType] 动态调用对应 API
• 仍保持响应式绑定与自动写入逻辑不变

这样一处封装，两处复用，避免重复造轮子。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

注意边界情况：跨标签页更新不同步怎么办？

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 相关的状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！