如何遍历LocalStorage中存储的复选框状态对象获取值为true的键？

你已经实现了页面刷新后保留复选框选中状态的功能，数据以JSON对象形式存在localStorage的checkboxValues键中。但你当前的遍历代码存在两个核心问题：

1. 错误遍历了localStorage的顶级键集合，而非checkboxValues对应的内部对象
2. 直接读取的是JSON字符串，未解析为JS对象，导致布尔值判断失效

正确的实现方式 #

方式1：原生JS遍历（for...in）

// 取出存储的JSON字符串并解析为对象，空对象作为默认值
const checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};

// 遍历对象的键值对，筛选值为true的键
for (const key in checkboxValues) {
  if (checkboxValues.hasOwnProperty(key) && checkboxValues[key] === true) {
    console.log(`${key} => ${checkboxValues[key]}`);
  }
}

方式2：原生JS简洁写法（Object.entries）

const checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};

// 解构键值对并筛选
Object.entries(checkboxValues).forEach(([key, value]) => {
  if (value) {
    console.log(`${key} => ${value}`);
  }
});

方式3：jQuery风格（与原有代码统一）

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};

// 用jQuery的each方法遍历对象
$.each(checkboxValues, function(key, value) {
  if (value === true) {
    console.log(key + " => " + value);
  }
});

错误代码的问题说明 #

你原代码遍历的是localStorage本身的所有顶级键，而你的复选框状态都封装在checkboxValues这一个键对应的JSON字符串里，所以只会输出checkboxValues这个键名。同时，localStorage[key]拿到的是未解析的JSON字符串，不是布尔值，因此value == true的判断永远不会成立。

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