web storage 本身不丢失布尔值，问题在于逻辑错误：每次组件挂载时用默认数据覆盖了 localstorage 中的用户设置。正确做法是**优先从 localstorage 读取状态，再在状态变更时写入**，而非单向覆盖。
在 Vue 应用中使用 localStorage 持久化布尔字段（如表格列的 visible: true/false）时，常见误区是仅在 mounted 钩子中单向写入——这会导致用户修改后刷新页面即恢复默认值。根本原因在于：你每次挂载都用初始 fieldsTest 覆盖了用户已保存的配置。
✅ 正确流程应为三步：
- 挂载时优先读取：从 localStorage 解析并合并到 data，若无则回退到默认值；
- 变更时即时保存：监听 field.visible 变化（推荐使用 watch 或 v-model 的事件绑定），将整个数组序列化存入；
- 注意作用域隔离：避免多用户共享同一 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 // 必须启用深度监听，因 visible 是嵌套属性
}
},
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 作为客户端持久化方案的正确打开方式。
