web storage 本身可以存储布尔值，但需注意 json 序列化限制及读写时机——必须在组件挂载时**优先从 localstorage 恢复状态**，并在数据变更后**及时同步更新**，否则默认初始化会覆盖用户选择。
在 Vue 应用中使用 localStorage 持久化布尔状态（如表格列的 visible: true/false）时，常见误区是仅在 mounted 钩子中「单向写入」本地存储，而忽略了「读取恢复」这一关键步骤。由于 data() 中的 fieldsTest 每次实例化都会重置为初始值，若不主动从 localStorage 取出并赋值，页面刷新后所有用户操作都将丢失。
✅ 正确做法分三步：
挂载时优先读取并初始化数据
在 mounted() 中检查 localStorage 是否存在已保存的状态，若有则解析并覆盖 fieldsTest；若无，则使用默认配置。响应式变更时同步写入存储
使用 watch 监听 fieldsTest 的变化（注意开启 deep: true），或更推荐——在 v-model 绑定的响应式字段变更后（如通过 @change 或计算属性 setter），调用 localStorage.setItem() 更新。确保 JSON 兼容性
localStorage 只接受字符串，因此必须用 JSON.stringify() 存储、JSON.parse() 读取。布尔值、数字、对象均可安全序列化，无需额外转换。
以下是优化后的完整实现示例（基于 Vue 2 + BootstrapVue）：
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 将真正实现跨会话持久化——用户关闭浏览器再打开，表格列的显示/隐藏状态依然保持一致。
