會話存儲購物車

Question

我想將商品添加到我的購物車中並將其顯示在列表中。 我的代碼似乎無法正常工作這是git hub鏈接： GitHub

 var cart = {}; function addToCart(product){ var productName = product.getAttribute("data-name"); var price = product.getAttribute("data-price"); cart[productName] = price; alert(productName + " successfully added to cart"); console.log(cart); sessionStorage.setItem("myCart", JSON.stringify(cart)); } function getCart(){ var test = sessionStorage.getItem("myCart"); console.log(JSON.parse(test)); } function clearCart(){ sessionStorage.removeItem("myCart"); } function display(){ var cart = JSON.parse(sessionStorage.getItem("myCart")); var content=''; for (var key in cart) { var name = key; //B var price = cart[key]; //15 content += '<tr><td>'+name+'</td><td>'+price+'</td></tr>'; } document.getElementById("cartTable").innerHTML = content; } 

 <h1>My Cart</h1> <table id="cartTable"> <tr> <td>Name</td> <td>Price</td> </tr> </table> <!-- Code from index.html --> <button id="prodA" data-name="A" data-price="10" onclick="addToCart(this)">Add to cart</button> <!-- end of code --> <button id="tCart" onclick="display()">View</button> <button id="getCart" onclick="getCart()" ><a href="cart.html">View Cart</a></button> 

Answer 1

我建議您將購物車從一個對象更改為一個數組，然后將產品直接推入購物車。

完成此操作后，將“ display（）”函數更改為如下所示：

function display() {
    var cart = JSON.parse(sessionStorage.getItem("myCart"));
    var content = document.getElementById("cartTable");

    content.innerHTML = cart.map(product => {
        return '<tr><td>' + product.name + '</td><td>' + product.price + '</td></tr>';
    }).join('');
}