When add item to local storage after refresh I lose others items

Viewed 107

When I add an item after refresh the other items are lost and only the item that was added after the refresh of the page remains

My code:

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));
  }
}
1 Answers

Maybe should you fill the cart in retrieving it from the 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 [];
    }
  }
}
Related