Добавить или удалить значение из объекта localstorage

Question

Я хочу добавить или удалить 1, щелкнув один из obj.onlist в этом массиве из localstorage

{loklakchicken: {name: "Lok Lak Chicken", tag: "loklakchicken", price: 9.9, onList: 2},…}
  Lottchabeef: {name: "Lot Tcha Beef", tag: "Lottchabeef", price: 9.9, onList: 1}
  loklakchicken: {name: "Lok Lak Chicken", tag: "loklakchicken", price: 9.9, onList: 2}
  loklakvegan: {name: "Lok Lak Vegan", tag: "loklakvegan", price: 9.9, onList: 17}
  lottchavegan: {name: "Lot Tcha Vegan", tag: "lottchavegan", price: 9.9, onList: 2}

Я пытаюсь что-то вроде этого

    let obj = localStorage.getItem('prodOnList');
    obj = JSON.parse(orderListItems);
    for (let i = 0; i < obj.length; i++) {
            $('.plus').click(function () {
                obj[i].onList += 1;
             }
            $('.minus').click(function () {
                obj[i].onList -= 1;
             }
    }
    localStorage.setItem("prodOnList", JSON.stringify(obj));

Я уверен, что я я упускаю что-то довольно очевидное, thx

ОБНОВЛЕНИЕ

Я делаю список корзины, созданный с помощью JS, и для каждого продукта в списке у меня есть кнопка, чтобы добавить или удалить один ... Я пытаюсь привязать свою функцию setItems к событию btn plus click безрезультатно ... Моя проблема в том, что я сейчас не понимаю, как нацелить объект из массива на localstorage, где я вызываю событие click!

thx для вашего помощь

class OrderBtn{
constructor(){
    this.prodList = [
     just remove the array with the products
    ];
}

addToList(){
    let menus = document.querySelectorAll('.add-list');
    for (let i = 0; i < menus.length; i++) {
        $(menus[i]).click(()=>{
            this.listCount(this.prodList[i]);
            this.totalPrice(this.prodList[i]);
            this.displayOrderList();
        });
    }
}

listCount(prod){
    let productNum = localStorage.getItem('listNum');
    productNum = parseInt(productNum);
    if (productNum) {
        localStorage.setItem('listNum', productNum + 1);
    } else {
        localStorage.setItem('listNum', 1);
    }
    this.setItems(prod);
}

setItems(prod){
    let orderListItems = localStorage.getItem('prodOnList');
    orderListItems = JSON.parse(orderListItems);
    if (orderListItems !== null){
        if(orderListItems[prod.tag] === undefined){
            orderListItems = {
                ...orderListItems,
                [prod.tag]: prod
            }
        }
        orderListItems[prod.tag].onList += 1;
    } else{
        prod.onList = 1;
        orderListItems = {
            [prod.tag]: prod
        }
    }
    localStorage.setItem("prodOnList", JSON.stringify(orderListItems));
}

totalPrice(prod){
    let orderTotal = localStorage.getItem('totalCost');
    if(orderTotal !== null){
        orderTotal = parseFloat(orderTotal);
        let resultPrice = orderTotal + prod.price;
        resultPrice = resultPrice.toFixed(2);
        localStorage.setItem('totalCost', resultPrice);
    } else {
        localStorage.setItem('totalCost', prod.price.toFixed(2));
    }
}

displayOrderList(){
    let orderItems = localStorage.getItem('prodOnList');
    let orderTotal = localStorage.getItem('totalCost');
    orderItems = JSON.parse(orderItems);
    let orderContainer = document.querySelector('.orderList');

    if (orderItems && orderContainer) {
        orderContainer.innerHTML = "";
        Object.values(orderItems).map(item =>{
            let totalItem = item.onList * item.price;
            totalItem = totalItem.toFixed(2);
            orderContainer.innerHTML += `
            <div class="quantity d-flex justify-content-between align-items-center mb-2">
                <i class="fas fa-times text-danger"></i>
                <div class="itemNum">
                    <i class="btnMinus fas fa-minus"></i>
                    <span class="mx-2">${item.onList}</span>
                    <i class="btnPlus fas fa-plus"></i>                    
                </div>
                <span class="total">${totalItem} €</span>
            </div>
            <div class="product d-flex justify-content-between align-items-center">
                <span>${item.name}</span>
            </div>
            `;
        });
            $('.totalOrder').text(`Total : ${orderTotal} €`)
    }else{
        orderContainer.innerHTML = `
        <p class="product">Votre panier est vide</p>`;

        $('.totalOrder').text(`Total : 0.00 €`)
    }
}

}

Answer 1

Если я не понял вашу проблему, это будет работать для вас

$('.plus').click(function () {
    addOrRemoveByOne('add');
}

$('.minus').click(function () {
    addOrRemoveByOne('remove');
}

addOrRemoveByOne(option) {
    let obj = JSON.parse(localStorage.getItem('prodOnList'));
    for (let key in obj) {
           if (option === 'add') {
               obj[key].onList += 1;
           }

           if (option === 'remove') {
               obj[key].onList -= 1;
           } 
    }
    localStorage.setItem("prodOnList", JSON.stringify(obj));}
}