javascript - session 存储购物车

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