如何在Local Storage中持久化布尔值并保持修改后状态？

• 核心原因：LocalStorage只能存储字符串类型，直接存布尔值true/false会被自动转成字符串"true"/"false"。如果读取时没做类型转换，比如直接用if(localStorage.getItem('yourKey'))，那字符串"false"会被判定为「真值」，看起来就像变回了true。

• 正确存储布尔值：
  存的时候用JSON.stringify()把布尔值转成标准字符串，确保类型一致：

  // 存false
  localStorage.setItem('isEnabled', JSON.stringify(false));
  

• 正确读取布尔值：
  取的时候用JSON.parse()把字符串转回布尔类型，避免类型判断错误：

  // 页面加载时读取，没存过就用默认值true
  const isEnabled = JSON.parse(localStorage.getItem('isEnabled')) ?? true;
  

• 排查初始化逻辑：
  检查页面加载时的默认值设置代码，别写这种错误逻辑：

  // 错误：因为存的是字符串，localStorage.getItem('isEnabled')永远不等于布尔true，会强制覆盖为true
  if (localStorage.getItem('isEnabled') !== true) {
    localStorage.setItem('isEnabled', 'true');
  }
  

  正确的默认值设置应该只在值不存在（返回null）时执行：

  if (localStorage.getItem('isEnabled') === null) {
    localStorage.setItem('isEnabled', JSON.stringify(true));
  }
  

• 快速调试：
  修改值后，打开浏览器控制台（F12），输入localStorage.getItem('你的键名')，看实际存储的内容：

  • 如果显示"false"，问题出在读取时的类型转换；
  • 如果还是"true"，说明修改值的代码没执行，或者键名拼写错误。

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