从本地存储对象添加或删除值

时间:2020-05-01 14:35:06

标签: javascript json local-storage

我想通过单击从本地存储中添加或删除1来为此数组中的obj.onlist之一

{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));

我确定我很想念一些东西,谢谢

更新

我正在用JS创建购物车列表,对于列表中的每个产品,我都有一个按钮来添加或删除一个... 我尝试将我的函数setItems绑定到btn加上click事件没有结果... 我的问题是我现在不知道如何在我称之为事件单击的localstorage上从数组中定位对象!

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 €`)
    }
}

}

1 个答案:

答案 0 :(得分:0)

如果我没有误解您的问题,这将为您服务

ID    FieldsChanged               NEW Value
1     STYLE                       15
1     FLOORPLAN                   4BED