从 localStorage 中删除数组中指定项的教程

本文详细介绍了如何在 `localstorage` 中存储的数组对象中，准确删除特定项目。核心问题在于 javascript 中严格相等运算符 `!==` 与数据类型不匹配时导致的删除失败。教程将分析问题根源，并提供两种解决方案：使用非严格相等运算符 `!=`，以及更推荐的显式类型转换方法，确保比较的准确性与代码的健壮性。

在 localStorage 数组中删除指定项

在 Web 开发中，localStorage 是一个常用的客户端存储机制，用于持久化少量数据。当我们需要存储一组结构化数据（如购物车商品列表、用户配置项等）时，通常会将其序列化为 JSON 字符串并存储。从这些数组中删除特定项目是常见的操作，但如果不注意细节，可能会遇到意想不到的问题。

考虑一个典型场景：我们将一个商品列表存储在 localStorage 中，其中每个商品都是一个包含 item_id、item_name 和 qty 等属性的对象。当用户希望从列表中删除某个商品时，我们需要根据其 item_id 来定位并移除。

常见问题分析：严格相等与类型不匹配

假设 localStorage 中存储的数据结构如下，其中 key 是 emp_id，对应的值是一个商品数组：

// localStorage key: "189"
[
  {"item_id":"50","item_name":"Delivery T-Shirt Medium danger","qty":1},
  {"item_id":"49","item_name":"Delivery T-Shirt Small danger","qty":"1"},
  {"item_id":"51","item_name":"Delivery T-Shirt Large danger","qty":"1"},
  {"item_id":"11","item_name":"Bread Pant 30 white","qty":"1"}
]

为了实现删除功能，我们可能会编写一个类似以下的函数：

function Deleteitem(emp_id, item_id_to_delete) {
  var itemDetails = localStorage.getItem(emp_id);

  if (itemDetails) {
    itemDetails = JSON.parse(itemDetails);

    // 尝试过滤掉要删除的项
    itemDetails = itemDetails.filter(function(item) {
      return item.item_id !== item_id_to_delete; // 核心比较逻辑
    });

    localStorage.setItem(emp_id, JSON.stringify(itemDetails));
  }

  // 假设有一个函数用于更新显示
  displayItemDetails();
}

这段代码的逻辑看起来很合理：获取数据、解析 JSON、使用 filter 方法遍历数组，当 item.item_id 与 item_id_to_delete 不相等时保留该项。然而，如果 item_id_to_delete 的数据类型与 item.item_id 在数组中的数据类型不一致，并且使用了严格不相等运算符 !==，那么删除操作将可能失败。

例如，在上述示例数据中，item.item_id 的值如 "50"、"49" 都是字符串类型。如果 item_id_to_delete 是一个数字类型（例如 50），那么 50 !== "50" 的结果将是 true，因为 !== 会同时比较值和类型。这意味着即使值相同，但类型不同，该项也不会被过滤掉，从而导致删除失败。

解决方案

解决这个问题主要有两种方法：

方案一：使用非严格相等运算符 !=

非严格相等运算符 != 在比较时会尝试进行类型转换。这意味着 50 != "50" 的结果是 false，因为 JavaScript 会将字符串 "50" 转换为数字 50 再进行比较。

修改 Deleteitem 函数中的比较逻辑如下：

小鸽子助手

一款集成于WPS/Word的智能写作插件

55

查看详情

function Deleteitem(emp_id, item_id_to_delete) {
  var itemDetails = localStorage.getItem(emp_id);

  if (itemDetails) {
    itemDetails = JSON.parse(itemDetails);

    itemDetails = itemDetails.filter(function(item) {
      // 使用非严格不相等运算符
      return item.item_id != item_id_to_delete;
    });

    localStorage.setItem(emp_id, JSON.stringify(itemDetails));
  }

  displayItemDetails();
}

注意事项： 这种方法简单直接，但在某些情况下，非严格相等可能会导致一些意料之外的类型转换行为，例如 0 == false 会返回 true。因此，虽然它能解决当前问题，但并非总是最推荐的方案，尤其是在需要精确控制类型匹配的场景。

方案二：显式进行类型转换（推荐）

更健壮和推荐的做法是，在进行比较之前，显式地将其中一个操作数转换为与另一个操作数相同的类型。这样可以避免 != 运算符可能带来的隐式类型转换问题，使代码更具可读性和可预测性。

通常，我们会将外部传入的 item_id_to_delete 转换为与 localStorage 中存储的 item.item_id 相同的类型。根据示例数据，item.item_id 是字符串，因此我们将 item_id_to_delete 也转换为字符串。

function Deleteitem(emp_id, item_id_to_delete) {
  var itemDetails = localStorage.getItem(emp_id);

  if (itemDetails) {
    itemDetails = JSON.parse(itemDetails);

    // 将 item_id_to_delete 显式转换为字符串类型
    const target_item_id_str = String(item_id_to_delete);

    itemDetails = itemDetails.filter(function(item) {
      // 使用严格不相等运算符进行比较，确保类型一致
      return item.item_id !== target_item_id_str;
    });

    localStorage.setItem(emp_id, JSON.stringify(itemDetails));
  }

  displayItemDetails();
}

反之，如果 localStorage 中的 item.item_id 存储的是数字类型（例如 50），而传入的 item_id_to_delete 可能是字符串（例如 "50"），则应该将 item.item_id 或 item_id_to_delete 转换为数字进行比较：

// 假设 item.item_id 在 localStorage 中是数字类型
// itemDetails = itemDetails.filter(function(item) {
//   return Number(item.item_id) !== Number(item_id_to_delete);
// });

最佳实践： 保持数据类型的一致性是减少这类错误的关键。在将数据存入 localStorage 之前，就应该确保其格式符合预期。例如，如果 item_id 总是数字，那么在存储前就应该将其转换为数字，或者在从 localStorage 读取后立即进行类型转换。

总结

在从 localStorage 中存储的数组对象中删除特定项目时，务必注意比较操作中数据类型的一致性。使用严格相等运算符 !== 进行比较时，如果操作数的类型不匹配，即使值相同，比较结果也会是 true，从而导致删除失败。

推荐的做法是，在比较之前显式地将操作数转换为相同的类型（例如，都转换为字符串或都转换为数字），然后再使用严格相等或不相等运算符进行比较。这样可以提高代码的健壮性、可读性和可维护性，避免因隐式类型转换带来的潜在问题。

以上就是从 localStorage 中删除数组中指定项的教程的详细内容，更多请关注php中文网其它相关文章！