web storage 本身可以存储布尔值，但需注意 json 序列化限制及读写时机——必须在组件挂载时**优先从 localstorage 恢复状态**，并在数据变更后**及时同步更新**，否则默认初始化会覆盖用户选择。

在 Vue 应用中使用 localStorage 持久化布尔状态（如表格列的 visible: true/false）时，常见误区是仅在 mounted 钩子中「单向写入」本地存储，而忽略了「读取恢复」这一关键步骤。由于 data() 中的 fieldsTest 每次实例化都会重置为初始值，若不主动从 localStorage 取出并赋值，页面刷新后所有用户操作都将丢失。

✅ 正确做法分三步：

1. 挂载时优先读取并初始化数据
   在 mounted() 中检查 localStorage 是否存在已保存的状态，若有则解析并覆盖 fieldsTest；若无，则使用默认配置。

2. 响应式变更时同步写入存储
   使用 watch 监听 fieldsTest 的变化（注意开启 deep: true），或更推荐——在 v-model 绑定的响应式字段变更后（如通过 @change 或计算属性 setter），调用 localStorage.setItem() 更新。

3. 确保 JSON 兼容性
   localStorage 只接受字符串，因此必须用 JSON.stringify() 存储、JSON.parse() 读取。布尔值、数字、对象均可安全序列化，无需额外转换。

以下是优化后的完整实现示例（基于 Vue 2 + BootstrapVue）：

Kive

一站式AI图像生成和管理平台

下载

export default {
  data() {
    return {
      // 初始化时尝试从 localStorage 恢复，失败则用默认值
      fieldsTest: this.loadFieldsFromStorage() || [
        {
          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() {
    // ✅ 已在 data() 中完成初始化，此处可省略，或仅用于验证
    console.log('Loaded fields:', this.fieldsTest)
  },
  watch: {
    // 深度监听 fieldsTest 变化，自动持久化
    fieldsTest: {
      handler() {
        localStorage.setItem('fieldsTest', JSON.stringify(this.fieldsTest))
      },
      deep: true,
      immediate: true // 立即执行一次，确保初始状态也被保存
    }
  },
  methods: {
    loadFieldsFromStorage() {
      try {
        const saved = localStorage.getItem('fieldsTest')
        return saved ? JSON.parse(saved) : null
      } catch (e) {
        console.warn('Failed to parse localStorage fieldsTest:', e)
        return null
      }
    }
  },
  computed: {
    visibleFields() {
      return this.fieldsTest.filter(field => field.visible)
    }
  }
}

⚠️ 注意事项：

• 避免多用户冲突：若应用面向多个用户（如不同账号共用同一浏览器），建议将 key 加入用户标识前缀，例如 ‘user_123_fieldsTest’；
• 兼容性兜底：localStorage 在无痕模式或禁用时可能抛错，建议用 try/catch 包裹读写逻辑；
• 性能考量：deep: true 的 watch 在字段较多时有开销，如仅需监听 visible 字段，可改用计算属性或单独监听每个 checkbox 的变更事件；
• Vue 3 用户：若使用 Composition API，推荐封装为 useLocalStorage 自定义 Hook，提升复用性。

通过以上方式，布尔值 visible: false 将真正实现跨会话持久化——用户关闭浏览器再打开，表格列的显示/隐藏状态依然保持一致。

https://www.php.cn/faq/2016050.html