如何遍历LocalStorage中存储的JSON对象并筛选特定值

本教程详细介绍了如何在javascript中正确地遍历localstorage中以json字符串形式存储的对象，特别是针对需要筛选出特定布尔值为`true`的键值对场景。文章将展示如何从localstorage中检索、解析数据，并利用`object.entries()`方法高效地迭代对象，从而避免直接遍历localstorage带来的常见错误，确保数据处理的准确性。

在Web开发中，LocalStorage是一种常用的客户端存储机制，用于在用户的浏览器中持久化数据。然而，LocalStorage只能存储字符串类型的数据。当我们需要存储复杂的数据结构，如JavaScript对象或数组时，通常需要先使用JSON.stringify()将其转换为JSON字符串，然后在读取时使用JSON.parse()将其转换回JavaScript对象。本文将聚焦于如何正确地遍历从LocalStorage中解析出的JSON对象，并筛选出满足特定条件的键值对。

理解LocalStorage的数据存储机制

LocalStorage以键值对的形式存储数据，其中键和值都必须是字符串。这意味着，如果你尝试直接存储一个JavaScript对象，它会被自动转换为字符串[object Object]，这显然不是我们想要的结果。因此，正确的做法是：

1. 存储时：localStorage.setItem('key', JSON.stringify(yourObject));
2. 读取时：const yourObject = JSON.parse(localStorage.getItem('key'));

常见误区：直接遍历LocalStorage

许多开发者在尝试遍历LocalStorage中存储的复杂对象时，可能会错误地尝试直接遍历localStorage对象本身，例如：

for (var i = 0, len = localStorage.length; i < len; i++) {
    var key = localStorage.key(i);
    var value = localStorage[key]; // 这里的value是字符串
    if (value == true) { // 尝试将字符串与布尔值比较
        console.log(key + " => " + value);
    }
}

这种方法存在几个问题：

• localStorage.key(i)会返回LocalStorage中所有顶级键名。
• localStorage[key]会返回该键名对应的原始字符串值。如果这个值是一个JSON字符串，它仍然是一个字符串，而不是一个JavaScript对象。
• 直接将一个JSON字符串（例如"{"checkbox1": false, ...}"）与布尔值true进行比较，结果通常是false，因为类型不匹配。即使是字符串"true"与布尔值true使用==比较，也可能因为类型强制转换而产生预期之外的结果。

因此，这种方法无法深入到某个特定LocalStorage键下存储的JSON对象的内部属性进行遍历和筛选。

正确的遍历与筛选方法

要正确地遍历LocalStorage中存储的JSON对象并筛选出特定值，我们需要遵循以下步骤：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

30

查看详情

1. 确定存储键名：明确你要操作的JSON对象在LocalStorage中对应的键名。
2. 从LocalStorage检索并解析数据：使用localStorage.getItem()获取字符串，然后使用JSON.parse()将其转换回JavaScript对象。
3. 遍历解析后的对象并筛选：使用Object.entries()方法遍历对象的键值对，并应用你的筛选条件。

以下是实现这一过程的示例代码：

示例代码

假设你的LocalStorage中存储了一个名为'checkboxValues'的键，其值为一个JSON字符串，代表一个包含复选框状态的对象，例如：

{
  "checkbox1": false,
  "checkbox2": false,
  "checkbox3": false,
  "checkbox4": true,
  "checkbox5": false,
  "checkbox6": true,
  "checkbox7": false,
  "checkbox8": false,
  "checkbox9": false
}

现在，我们希望遍历这个对象，并找出所有值为true的键。

// 1. 定义LocalStorage中存储数据的键名
const STORAGE_KEY_NAME = 'checkboxValues';

// 2. 从LocalStorage中获取数据并解析
//    使用 ?? {} 确保即使LocalStorage中没有该键或值为null，也能得到一个空对象，避免JSON.parse(null)的潜在问题
const storageBoxes = JSON.parse(window.localStorage.getItem(STORAGE_KEY_NAME)) ?? {};

// 3. 遍历解析后的对象，并筛选出值为 true 的键
for (const [key, value] of Object.entries(storageBoxes)) {
  // 使用严格相等 (===) 确保类型和值都匹配
  if (value === true) {
    console.log(`键 "${key}" 的值为 true！`);
    // 在此处可以执行其他操作，例如将这些键添加到某个数组或DOM元素中
    // data.append(key); // 示例：如果 data 是一个 FormData 对象或其他收集器
  }
}

代码解析

• const STORAGE_KEY_NAME = 'checkboxValues';：定义一个常量来存储LocalStorage的键名，这有助于提高代码的可读性和可维护性，避免硬编码字符串。
• const storageBoxes = JSON.parse(window.localStorage.getItem(STORAGE_KEY_NAME)) ?? {};：
  • window.localStorage.getItem(STORAGE_KEY_NAME)：从LocalStorage中获取名为'checkboxValues'的字符串值。如果该键不存在，它将返回null。
  • JSON.parse(...)：将获取到的JSON字符串解析成一个JavaScript对象。
  • ?? {} (Nullish coalescing operator)：这是一个ES2020特性。如果JSON.parse(...)的结果是null或undefined（例如，当localStorage.getItem()返回null时），则storageBoxes将被赋值为一个空对象{}。这避免了在尝试遍历null或undefined时引发错误。
• for (const [key, value] of Object.entries(storageBoxes))：
  • Object.entries(storageBoxes)：这是一个非常实用的方法，它返回一个给定对象自身可枚举字符串键属性的[key, value]对的数组。例如，对于{"a": 1, "b": 2}，它会返回[["a", 1], ["b", 2]]。
  • for (const [key, value] of ...)：这是一个for...of循环，结合了数组解构赋值。在每次迭代中，它会从Object.entries()返回的数组中解构出一个[key, value]对，并将其分别赋值给key和value变量。
• if (value === true)：这是筛选条件。我们使用严格相等运算符===来确保value不仅是true，而且其类型也是布尔值true，避免了JavaScript的类型强制转换可能带来的意外行为。

注意事项

1. 数据类型转换的重要性：始终记住LocalStorage存储的是字符串。任何非字符串类型（如对象、数组、数字、布尔值）在存储前都应通过JSON.stringify()转换为字符串，读取后通过JSON.parse()转换回其原始类型。
2. 处理空值或无效数据：当localStorage.getItem()返回null（表示键不存在）或存储的值不是有效的JSON字符串时，JSON.parse()可能会抛出错误或返回null。使用?? {}（或|| {}，如果需要兼容旧浏览器且能接受更多"假值"的默认处理）可以优雅地处理这种情况，提供一个默认的空对象，防止后续操作出错。
3. 严格相等性 (===)：在比较值时，尤其是在涉及布尔值时，建议使用===（严格相等）而不是==（宽松相等）。===会检查值和类型是否都相等，而==会尝试进行类型转换，这可能导致非预期的结果。
4. 遍历范围：直接遍历localStorage（通过localStorage.length和localStorage.key(i)）只能获取到LocalStorage中的顶级键名及其原始字符串值。如果你需要访问这些顶级键所存储的JSON对象内部的属性，必须先获取并解析该键的值。

总结

正确地处理LocalStorage中存储的复杂数据结构是前端开发中的一项基本技能。通过理解LocalStorage的字符串存储特性，并结合JSON.parse()、Object.entries()以及适当的空值处理和严格相等性检查，我们可以高效且健壮地遍历和筛选存储在其中的JSON对象。这种方法不仅提高了代码的准确性，也使其更具可读性和可维护性。

以上就是如何遍历LocalStorage中存储的JSON对象并筛选特定值的详细内容，更多请关注php中文网其它相关文章！