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

Question

I am building a shopping cart with products fetched from a json-server. I have managed to display the products, implement the add to cart function and display the quantity, however, I am now stuck at the increment and decrement fucntion. The idea is everytime the user click on the + and - buttons, the product.count property change (which I use it to display it on the cart table). Here is my code

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

My attempt to implement the function

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

The problem is I have to reload the page again in order for the change to reflect on the page. Can anyone help me please?

Answer 1

I think you need to call loadCart() again after products in localStorage is changed.

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()
}