javascript - 刷新后将项目添加到本地存储时，我丢失了其他项目

Question

当我在刷新后添加一个项目时，其他项目都会丢失，只有在刷新页面后添加的项目仍然存在

我的代码:

let buttonsDom = document.querySelectorAll(elementsStr.itemsBtn)
const buttons = [... buttonsDom]

window.addEventListener('DOMContentLoaded', () => {
    Storage.saveProducts(itemStr)
    let cart = []

    buttons.forEach((btn) => {
        const id = btn.dataset.id;
        if(localStorage.getItem('cart')) {
            if(Storage.findCart(id)){
                btn.innerText = 'in cart';
                btn.disabled = true;
            }
        btn.addEventListener('click', () => {
            btn.innerText = 'in cart';
            btn.disabled = true;
            const cartItem = { ...Storage.findProduct(id), amount:1 }
            cart = [...cart, cartItem]
            Storage.saveCart(cart)

        })
    })  
})

---

export class Storage {
  static saveProducts(products) {
    localStorage.setItem("items", products);
  }

  static findProduct(id) {
    const products = JSON.parse(localStorage.getItem("items"));

    return products.find((item) => item._id === id);
  }

  static findCart(id) {
    const product = JSON.parse(localStorage.getItem("cart"));

    return product.find((item) => item._id === id);
  }

  static saveCart(cart) {
    localStorage.setItem("cart", JSON.stringify(cart));
  }
}

Answer 1

也许您应该在从 localStorage no 检索它时填写购物车？

let buttonsDom = document.querySelectorAll(elementsStr.itemsBtn)
const buttons = [... buttonsDom]

window.addEventListener('DOMContentLoaded', () => {
    Storage.saveProducts(itemStr)
    let cart = Storage.retrieveCart();  // <---- Here

    buttons.forEach((btn) => {
        const id = btn.dataset.id;
        if(localStorage.getItem('cart')) {
            if(Storage.findCart(id)){
                btn.innerText = 'in cart';
                btn.disabled = true;
            }
        btn.addEventListener('click', () => {
            btn.innerText = 'in cart';
            btn.disabled = true;
            const cartItem = { ...Storage.findProduct(id), amount:1 }
            cart = [...cart, cartItem]
            Storage.saveCart(cart)

        })
    })  
})

---

export class Storage {
  static saveProducts(products) {
    localStorage.setItem("items", products);
  }

  static findProduct(id) {
    const products = JSON.parse(localStorage.getItem("items"));

    return products.find((item) => item._id === id);
  }

  static findCart(id) {
    const product = JSON.parse(localStorage.getItem("cart"));

    return product.find((item) => item._id === id);
  }

  static saveCart(cart) {
    localStorage.setItem("cart", JSON.stringify(cart));
  }

  static retrieveCart() {                     // <---- Here
    let cart = localStorage.getItem("cart");
    
    if (cart === null) {
         return [];
    }

    try {
       return JSON.parse(cart);
    } catch(e) {
         return [];
    }
  }
}