Vue.js 中的 watch 可实现响应式数据自动持久化：监听目标数据并序列化存入 localStorage，初始化时读取恢复，推荐封装为 useLocalStorage Composable 统一处理读写、异常及多标签页同步。

Vue.js 中的 watch 可以监听响应式数据变化，并在变化时执行自定义逻辑，配合 localStorage 就能实现数据的自动持久化存储与读取。关键在于：监听目标数据、序列化后存入 localStorage、初始化时从 localStorage 恢复。

监听指定数据并写入 localStorage

使用 watch 监听需要持久化的响应式变量（如用户设置、表单状态等），在回调中调用 localStorage.setItem() 存储。注意必须将非字符串类型（如对象、数组）用 JSON.stringify() 序列化。

• 推荐使用对象形式的 watch，开启 immediate: true 和 deep: true（针对对象/数组）
• 避免监听整个 data 或大型响应式对象，防止频繁写入影响性能
• 示例：监听用户主题偏好 theme

watch: {
  theme: {
    handler(newVal) {
      localStorage.setItem('user-theme', newVal);
    },
    immediate: true
  }
}

组件初始化时从 localStorage 恢复数据

在 created 或 setup（组合式 API）中读取 localStorage 并赋值给响应式变量，确保页面刷新后状态不丢失。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

• 务必做容错处理：用 try...catch 或逻辑判断防止 JSON 解析失败
• 对 JSON.parse() 的结果进行类型校验，避免意外数据污染应用状态
• 若 localStorage 中无值，应提供合理默认值

// 组合式 API 示例
const theme = ref(localStorage.getItem('user-theme') || 'light');

封装成可复用的工具函数或 Composable

重复逻辑建议抽离为独立函数，比如 useLocalStorage(key, defaultValue)，内部自动完成读取、监听、写入和响应式绑定。

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

• 返回一个 ref，其值与 localStorage 同步，且支持响应式更新
• 内部用 watch 监听 ref 变化，触发 localStorage.setItem
• 支持对象类型：自动 JSON.stringify / JSON.parse，并捕获解析异常

// 简易版 useLocalStorage 实现片段
function useLocalStorage(key, defaultValue) {
  const saved = localStorage.getItem(key);
  const data = ref(saved ? JSON.parse(saved) : defaultValue);
  watch(data, (val) => {
    try {
      localStorage.setItem(key, JSON.stringify(val));
    } catch (e) {
      console.warn(`Failed to save ${key} to localStorage`, e);
    }
  }, { deep: true });
  return data;
}

注意事项与边界情况处理

localStorage 有容量限制（通常 5MB）、不支持跨域共享、无法监听外部修改（如其他标签页写入）。需针对性应对：

• 敏感信息（如 token）不应存于 localStorage，优先考虑 httpOnly Cookie
• 多标签页场景下，可用 storage 事件监听其他窗口的 localStorage 变更并同步本地状态
• 用户手动清除缓存后，应降级到默认值，避免 null 或 undefined 导致渲染错误
• 避免在 SSR 环境（如 Nuxt）中直接访问 localStorage，需加 typeof window !== 'undefined' 判断