本文详细介绍了如何在 `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 函数中的比较逻辑如下：
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，从而导致删除失败。
推荐的做法是，在比较之前显式地将操作数转换为相同的类型（例如，都转换为字符串或都转换为数字），然后再使用严格相等或不相等运算符进行比较。这样可以提高代码的健壮性、可读性和可维护性，避免因隐式类型转换带来的潜在问题。
