如何删除localStorage的basketItems键中指定的对象条目？

localStorage 仅支持字符串存储，你需要先将存储的序列化JSON解析为JS数组，筛选掉目标条目后再序列化存回即可完成删除操作。

实现步骤 #

• 读取localStorage中basketItems的字符串值，解析为JavaScript数组
• 基于唯一标识（如每条数据的id字段）筛选数组，排除需要删除的目标条目
• 将筛选后的新数组重新序列化为JSON字符串，存回localStorage的basketItems键

完整代码示例 #

// 入参为你需要删除的条目的唯一标识，可根据实际匹配逻辑修改
const deleteBasketItem = (targetId) => {
  // 读取并解析存储内容，兼容空值、解析异常场景
  let basketItems = []
  try {
    const storedItems = localStorage.getItem('basketItems')
    if (storedItems) {
      basketItems = JSON.parse(storedItems)
    }
  } catch (e) {
    console.error('basketItems 数据解析失败', e)
    // 解析异常时可根据业务需求选择清空错误存储，默认中断操作
    // localStorage.removeItem('basketItems')
    return
  }

  // 筛选出不需要删除的条目，匹配规则可根据实际需求调整
  const filteredItems = basketItems.filter(item => item.id !== targetId)

  // 处理后的结果存回localStorage
  localStorage.setItem('basketItems', JSON.stringify(filteredItems))
}

// 调用示例：删除id为3的购物车条目
deleteBasketItem(3)

注意事项 #

• 匹配删除规则优先用条目唯一标识（如id），不要直接对比对象引用，序列化后的对象解析后和原对象引用地址不同，直接对比会失效；如果没有唯一id，可组合多个业务字段匹配，比如item.sku === targetSku && item.spec === targetSpec
• 必须加try/catch捕获JSON解析异常，避免存储内容被非法篡改后导致页面脚本报错
• 如果你当前的basketItems不是标准JSON数组格式，建议先调整存储逻辑为标准数组格式再按上述方案实现，非标准格式的遍历删除效率和稳定性都很低

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