如何从购物页面显示购物车页面上的商品

Question

我希望当我点击购物车页面上的添加到购物车时，它显示在购物车页面上，并显示其详细信息，即使我刷新，也无法删除，除非我单击删除。这些产品来自一个json文件。

​

<!-- shopping HTML -->
<div class="col-md-3">
                <div class="items">
                    <div class='photo'>
                        <img src="${item.imagelink}">
                    </div>
                    <div class="info">
                        <h5>${item.name}</h5>
                        <h5>$${item.price}</h5>
                    </div>
                    <div class="add">
                    <button class="btn btn-primary add">Add to cart</button>
                    </div>
                </div>
            </div>

​

​

<!--Cart HTML  -->
<div class="product-image">
                <img src="${item.imagelink}">
            </div>
            <div class="product-name">
                <div class="product-title">${item.name}</div>
            </div>
            <div class="product-price">$${item.price}</div>
            <div class="product-quantity">
                <input type="number" value="1" min="1">
            </div>
            <div class="product-line-price">45.99</div>

​

​

//when add to cart is clicked
$('button.add').click(function () {
        let output = '';
        output += `

            <div class="product-image">
                <img src="${item.imagelink}">
            </div>
            <div class="product-name">
                <div class="product-title">${item.name}</div>
            </div>
            <div class="product-price">$${item.price}</div>
            <div class="product-quantity">
                <input type="number" value="1" min="1">
            </div>
            <div class="product-line-price">45.99</div>
        `;
        $('.product').html(output);
    });

​

Answer 1

您应该使用cookies。Cookie基本上是存储在计算机上的文件中的信息。网站(如网上商店)可以读出信息并相应地显示在网页上。我将简要地解释如何在JavaScript中使用它们。有关更多信息，有一个很好的教程here。

如下所示设置cookie：

document.cookie = "item1name=Gamepad"

像这样读取cookie的值：

var x = document.cookie

因此，您的代码的最小示例如下

<!-- shopping HTML -->
<div class="col-md-3">
  <div class="items">
    <div class='photo'>
      <img src="">
    </div>
    <div class="info">
      <h5 class='item-name'>Gamepad</h5>
      <h5 class='item-price'>$ 49.99</h5>
    </div>
    <div class="add">
      <button class="btn btn-primary add">Add to cart</button>
    </div>
  </div>
</div>

<script>
  $('button.add').click(function () {
    var itemName = $('.item-name').text();
    var itemPrice = $('.item-price').text();
    document.cookie = 'itemName=' + itemName;
    document.cookie = 'itemPrice=' + itemPrice;
  });
</script>