JavaScript购物车对象出现内部重复嵌套问题求助

脚本保存购物车对象时，部分对象内部出现嵌套重复的情况，但有一个对象正常无重复。点击商品后，对应对象内部会保存重复项，需要每个点击商品都单独保存为无内部重复的对象才能继续开发。调试发现main.js的setItems()方法存入localStorage时每个对象都是独立的，但执行checkout()方法后，console.log显示部分对象存在内部重复，多数情况下仅一个对象正常。控制台显示异常：1product内部嵌套了1product和2product的重复内容，2product保存正常。

核心问题出在直接引用原始product对象，未做深拷贝处理。当你把product直接存入cartItems时，若该product对象后续被修改（比如其他操作添加额外属性），或多次复用同一个对象实例，就会导致localStorage中的对象出现嵌套重复：

• 第一次添加商品时，product.inCart = 1直接修改了原始对象；若后续列表中同一个商品DOM对应的对象被复用，再次添加时只是存入同一个对象引用，而非新的副本。
• JSON.parse与JSON.stringify的序列化过程，若遇到循环引用或重复对象引用，会出现嵌套重复的异常输出。

修改setItems()方法，每次存入cartItems时创建product对象的深拷贝，确保每个购物车对象都是独立实例：

function setItems(product){
  let cartItems = localStorage.getItem('productsInCart')
  cartItems = JSON.parse(cartItems) || {} // 简化null判断逻辑

  // 创建product的深拷贝，避免引用原始对象
  const productCopy = JSON.parse(JSON.stringify(product))

  if(cartItems[productCopy.img] == undefined){
    productCopy.inCart = 1
    cartItems = {
      ...cartItems,
      [productCopy.img]: productCopy
    }
  } else {
    cartItems[productCopy.img].inCart += 1
  }
  
  localStorage.setItem('productsInCart', JSON.stringify(cartItems))
}

关键修改点 #

• 用JSON.parse(JSON.stringify(product))生成深拷贝，彻底切断与原始对象的引用关联。
• 将inCart的初始化逻辑移至新增商品分支，避免修改原始对象。
• 简化null判断，代码更简洁易读。

修改后，每次添加商品都会存入独立的对象副本，执行checkout()时console.log输出的对象将不再出现内部嵌套重复。

main.js 原代码 #

function setItems(product){
  let cartItems = localStorage.getItem('productsInCart')
  cartItems = JSON.parse(cartItems)
  console.log(cartItems) //works
  if(cartItems != null){
      if(cartItems[product.img] == undefined){
          cartItems = {
              ...cartItems,
              [product.img]: product
          }
          console.log(cartItems)
      }
      cartItems[product.img].inCart += 1
      console.log(cartItems) //works
  }else{
      product.inCart = 1
      cartItems = {
          [product.img]: product
  }
  console.log(cartItems)//funkar

  }
  
  localStorage.setItem('productsInCart',JSON.stringify(cartItems))
  console.log(localStorage.getItem('productsInCart'))
}

cart.js 原代码 #

//checkout
function checkout(id){
        let cartItemsObj = localStorage.getItem('productsInCart')
        cartItemsObj = JSON.parse(cartItemsObj)
        console.log(cartItemsObj)
        
        let cartArray = Object.values(cartItemsObj)
        console.log(cartArray )
        let index = ''
        cartArray.map((item) =>{
          index= item.id
          console.log('DATA OBJ ID', index)
        })
}

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