如何正确使用 Web Storage 持久化 Vue 中的布尔状态

web storage 本身不丢失布尔值，问题在于逻辑错误：每次组件挂载时用默认数据覆盖了 localstorage 中的用户设置。正确做法是**优先从 localstorage 读取状态，再在状态变更时写入**，而非单向覆盖。

在 Vue 应用中使用 localStorage 持久化布尔字段（如表格列的 visible: true/false）时，常见误区是仅在 mounted 钩子中单向写入——这会导致用户修改后刷新页面即恢复默认值。根本原因在于：你每次挂载都用初始 fieldsTest 覆盖了用户已保存的配置。

✅ 正确流程应为三步：

1. 挂载时优先读取：从 localStorage 解析并合并到 data，若无则回退到默认值；
2. 变更时即时保存：监听 field.visible 变化（推荐使用 watch 或 v-model 的事件绑定），将整个数组序列化存入；
3. 注意作用域隔离：避免多用户共享同一 key，可添加前缀（如 user_${userId}_fieldsTest）或使用 sessionStorage 作临时隔离。

以下是优化后的实现示例（Vue 2 语法，兼容 Composition API 思路）：

export default {
  data() {
    return {
      fieldsTest: this.loadFieldsFromStorage()
    }
  },
  mounted() {
    // ✅ 已在 data() 中完成初始化，此处无需重复 setItem
  },
  watch: {
    fieldsTest: {
      handler() {
        // ✅ 每次 fieldsTest 变更即持久化
        localStorage.setItem('fieldsTest', JSON.stringify(this.fieldsTest))
      },
      deep: true // 必须启用深度监听，因 visibl
e 是嵌套属性
    }
  },
  methods: {
    loadFieldsFromStorage() {
      const saved = localStorage.getItem('fieldsTest')
      if (saved) {
        try {
          const parsed = JSON.parse(saved)
          // 安全合并：保留原始结构，仅覆盖 visible 字段
          return this.fieldsTest.map(field => {
            const savedField = parsed.find(f => f.key === field.key)
            return { ...field, visible: savedField?.visible ?? field.visible }
          })
        } catch (e) {
          console.warn('Invalid localStorage fieldsTest, falling back to defaults')
        }
      }
      return [
        { key: 'userStatus', label: 'Status', sortable: true, sortByFormatted: true, visible: true },
        { key: 'userAge', label: 'Age', sortable: true, sortByFormatted: true, visible: true },
        { key: 'userName', label: 'Username', sortable: true, sortByFormatted: true, visible: true }
      ]
    }
  }
}

⚠️ 关键注意事项：

• 不要在 mounted 中调用 setItem 初始化——这是导致“不保存”的主因；
• watch 必须设 deep: true，否则无法捕获 field.visible 的变化；
• 使用 JSON.parse/JSON.stringify 时务必包裹 try...catch，避免 localStorage 数据损坏导致白屏；
• 若应用支持多账号登录，建议将 key 动态化（例如 localStorage.setItem(\user_${this.userId}_fields`, ...)`），防止配置串扰。

通过以上调整，用户切换列显隐后刷新页面，状态将完整保留——这才是 Web Storage 作为客户端持久化方案的正确打开方式。