如何更新总价并在更新后保留新数量？

Question

我正在创建一个购物车，我希望在单击更新按钮时更新总价。另外，我希望新的数量和总价格在刷新页面后保持不变。

我正在使用wamp服务器。

显示代码：

var products = JSON.parse(localStorage.getItem('products'));
var shoppingCart = JSON.parse(localStorage.getItem('shoppingCart'));
var itemQuantity;

function showItem(){
    var total=0;
    for(var i in shoppingCart) {
        var id = shoppingCart[i]; 
        var itemImage = products[id].image;
        var itemPrice = products[id].price;
        var itemDescription = products[id].description;
        itemQuantity=1;
        var totalPrice = parseInt(itemPrice*itemQuantity);

        var index = "<tr><td><img 
               src='img/"+itemImage+"'width='100px'/></td> 
               <td>"+itemDescription + "</td><td>" + itemPrice</td>
               <td><input id="+id+" type=number min=1 max=100 
               value="+itemQuantity+" /></td>
               <td>"+totalPrice+"</td>
               <td>"+ "<button 
               onclick='removeItem("+i+")'>Remove</button></td></tr>";

        $('#product_list').append(index);
        total += (totalPrice);
    } 
    document.getElementById('total').innerHTML = total;
    document.querySelector('.badge').innerHTML = shoppingCart.length;
}
showItem();

更新总价：

function saveCart() {
    localStorage.setItem('saveCart', JSON.stringify(shoppingCart));
};

function saveInput() { 
    localStorage.setItem('product', JSON.stringify(products));
};

$(document).ready(function(){
    $(".btn-update").click(function(){
        for(var i in shoppingCart) {
            var id= shoppingCart[i];
            itemQuantity = $("#"+id+"").val();
        }
        $("#product_list").empty();
        saveInput();
        showItem();
    });
});

HTML

        <table id="cart" border="0">
            <thead>
                <tr><th>Product</th><th>Description</th><th>UnitPrice</th> 
                <th>Quantity</th><th>Total Price</th></tr>

            </thead>
            <tbody id="product_list">

            </tbody>
            <tfoot id="cartFooter">
                <tr>
                    <th>TOTAL</th>
                    <th></th>
                    <th></th>
                    <th id="total" align="right">0</th>
                </tr>
            </tfoot>
        </table>

我希望单击更新按钮后可以更新总价格，并且刷新后新的数量和新的总价格保持不变。