Web Storage无法保存Bootstrap表格列可见性布尔值的原因排查

你当前的实现存在两个关键问题，导致状态无法持久化：

1. 初始化逻辑颠倒：你在mounted里是把默认的fieldsTest存进localStorage，而不是先读取存储的状态来覆盖默认值，所以刷新后还是用初始的visible: true。
2. 未监听数据变化：用户修改复选框切换visible值时，没有把更新后的状态同步到localStorage，所以修改不会被保存。

具体修改步骤 #

1. 修正初始化逻辑（mounted钩子） #

页面加载时，先读取localStorage里的存储数据，如果存在就替换默认的fieldsTest，保证刷新后用用户之前设置的状态。

2. 监听数据变化，自动同步到localStorage #

因为fieldsTest是数组，里面的对象属性变化属于深度变化，需要用Vue的深度监听来捕获，每次变化时更新localStorage。

修改后的完整代码 #

<template>
  <b-row>
    <b-col>
      <b-checkbox
        :disabled="visibleFields.length == 1 && field.visible"
        v-for="field in fieldsTest"
        :key="field.key" <!-- 原代码的field.id不存在，改用field.key作为唯一标识 -->
        v-model="field.visible"
        inline>
        {{ field.label }}
      </b-checkbox>
    </b-col>
  </b-row>
  <div>
    <!-- 修正b-table的配置：:items传入表格数据，:fields传入列配置 -->
    <b-table striped hover :items="tableData" :fields="visibleFields"></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟从数据库获取的表格数据（实际项目替换为接口返回值）
      tableData: [
        { userStatus: 'Active', userAge: 28, userName: 'John' },
        { userStatus: 'Inactive', userAge: 32, userName: 'Jane' }
      ],
      // 初始列配置，后续会被localStorage数据覆盖
      fieldsTest: [
        {
          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
        }
      ]
    }
  },
  computed: {
    visibleFields() {
      return this.fieldsTest.filter(field => field.visible)
    }
  },
  mounted() {
    // 读取本地存储的列状态
    const savedFields = localStorage.getItem('fieldsTest');
    if (savedFields) {
      // 用存储的状态覆盖默认配置
      this.fieldsTest = JSON.parse(savedFields);
    }
  },
  watch: {
    // 深度监听列配置的变化
    fieldsTest: {
      handler(newVal) {
        // 每次修改后同步到localStorage
        localStorage.setItem('fieldsTest', JSON.stringify(newVal));
      },
      deep: true // 开启深度监听，捕获数组内对象属性的变化
    }
  }
}
</script>

额外注意点 #

• 原代码中b-table的配置有误：:items应该传入表格数据，列的显示配置要用:fields，已在代码中修正。
• 如果实际项目中是从接口获取fieldsTest的初始配置，需要先获取接口数据，再和localStorage的状态合并（比如通过key匹配更新visible值），避免覆盖原始的label、sortable等配置。

内容的提问来源于stack exchange，提问作者Cphml444