我正在尝试构建类似于购物车的东西。在页面上，用户可以单击任意数量的inventory项，点击后，这些项目将添加到sessionStorage。在页面的不同部分，我会显示sessionStorage，以便用户可以根据需要修改购物车。
现在我有一个问题sessionStorage的工作原理是它有所有数据，但是如果我点击一堆项目，直到我刷新页面才会看到我的购物车中反映的数据。这打败了我尝试学习Javascript的全部目的，所以希望有一个允许自动更新的答案，这样用户就可以在没有页面刷新的情况下添加/删除购物车。
代码：
<body>
<div class="col-xs-2" id="cart">
</div>
</body>
<script>
var cart = [];
$(document).on("click", "#inventory", function() {
//if statement so that it pushes ONLY if it doesn't already exist in cart
cart.push({
inventory_id: $(this).data('inventory_id'),
inventory_name: $(this).data('inventory_name'),
inventory_description: $(this).data('inventory_description'),
lender_email: $(this).data('lender_email')
});
sessionStorage.setItem("cart", JSON.stringify(cart));
});
$('#cart').html(sessionStorage.getItem("cart"));
</script>
答案 0 :(得分：0)
首先，您必须获取购物车商品的当前状态，以便附加商品，否则您将更换同一商品。
您可以在此处查看：http://jsfiddle.net/1vfo2e0g/4/
<ul>
<li>
<a href="#" class="item"
data-inventory_id="1"
data-inventory_name="Item 1"
data-inventory_description="Description 1"
data-lender_email="email1@email.com">Item 1</a>
</li>
<li>
<a href="#" class="item"
data-inventory_id="2"
data-inventory_name="Item 2"
data-inventory_description="Description 2"
data-lender_email="email2@email.com">Item 2</a>
</li>
<ul>
<div class="col-xs-2" id="cart">
<ul></ul>
</div>
populateCart(); // Populates the cart when page loads
$(document).on("click", ".item", function() {
// Get current state of our items from session
var items = JSON.parse(sessionStorage.getItem("cart"));
if(items === null) // if cart is empty
items = [];
// Populate the item
var item = {
inventory_id: $(this).data('inventory_id'),
inventory_name: $(this).data('inventory_name'),
inventory_description: $(this).data('inventory_description'),
lender_email: $(this).data('lender_email')
};
items.push(item); // Push item to the cart
sessionStorage.setItem("cart", JSON.stringify(items)); // Save cart back to session
addToCart(item); // append item to the cart
});
function populateCart(){
var items = JSON.parse(sessionStorage.getItem("cart"));
if(items !== null){
var cart = $('#cart > ul');
for (i = 0; i < items.length; i++) {
cart.append('<li>' + items[i]['inventory_name'] + "</li>");
}
}
}
function addToCart(item){
$('#cart > ul').append('<li>'+ item['inventory_name'] +'</li>');
}