如何在不重新加载页面的情况下更新 localStorage？

Question

我正在构建一个购物车，其中包含从 json 服务器获取的产品。我已经设法显示产品，实现添加到购物车功能并显示数量，但是，我现在停留在增量和减量功能上。这个想法是每次用户单击 + 和 - 按钮时，product.count 属性都会发生变化（我用它来将其显示在购物车 table 上）。这是我的代码

load cart from localstorage
function loadCart() {
    let products = JSON.parse(localStorage.getItem('products'));
    let cartTotalItem = document.querySelector('.cart__value');
    cartTotalItem.textContent = products.length;
    products.forEach(product => {
        let cartItem = document.createElement('tr');
        cartItem.innerHTML = `<td><img src="${product.imgSrc}" alt='product image'></td>
                  <td>${product.name}</td>
                  <td><span class='cart-price'>${product.price},000vnd</span></td>
                  <td>
                    <button action="remove" onclick='decrease()'>-</button>
                    <input name='product' class="product__quantity" type="number" min='1' max='100' value='${product.count}'>
                    <button action="add" onclick='change()' >+</button>
                  </td>
                  <td><span class='cart-total-value'>${parseInt(product.price) * product.count},000vnd</span></td>
                  <td>
                    <button class="delete--item"><i class="far fa-trash-alt"></i></button>
                  </td>`;
        tableBody.appendChild(cartItem);
    });
}

我实现功能的尝试


function change() {
    let products = JSON.parse(localStorage.getItem('products'));
    for (let i = 0; i < products.length; i++) {
        let inputValue = document.querySelector('.product__quantity').textContent
        inputValue = products[i].count++
        localStorage.setItem('products', JSON.stringify(products))
    }
}

function decrease() {
    let products = JSON.parse(localStorage.getItem('products'));
    for (let i = 0; i < products.length; i++) {
        let inputValue = document.querySelector('.product__quantity').value
        inputValue = products[i].count--
        localStorage.setItem('products', JSON.stringify(products))
    }
}

问题是我必须重新加载页面才能使更改反映在页面上。谁能帮帮我？

Answer 1

我想你需要在localStorage中的产品改变后再次调用loadCart()。

function change() {
    let products = JSON.parse(localStorage.getItem('products'));
    for (let i = 0; i < products.length; i++) {
        let inputValue = document.querySelector('.product__quantity').textContent
        inputValue = products[i].count++
        localStorage.setItem('products', JSON.stringify(products))
    }
    loadCart()
}

function decrease() {
    let products = JSON.parse(localStorage.getItem('products'));
    for (let i = 0; i < products.length; i++) {
        let inputValue = document.querySelector('.product__quantity').value
        inputValue = products[i].count--
        localStorage.setItem('products', JSON.stringify(products))
    }
    loadCart()
}

如何在不重新加载页面的情况下更新 localStorage？

How to update localStorage without reload the page?

html

javascript

css

json

local-storage