Question

我正在尝试通过将用户选择的产品数据存储在本地存储中来构建购物车，然后通过从本地存储中检索产品数据来填充购物车。当点击添加到购物车按钮时，我使用下面的代码将产品数据存储到本地存储;

$('#addtocart').on('click', function(e) {
  var qty = document.getElementById("p-qty").value;
  var li = $(this).parent();
  var product = {};

  product.id = productid;
  product.name = document.getElementById("nomenclature").value;
  product.price = document.getElementById("productprice").value;
  product.quantity = qty;
  addToCart(product);
});

function addToCart(product) {
  // Retrieve the cart object from local storage
  if (localStorage && localStorage.getItem('cart')) {
    var cart = JSON.parse(localStorage.getItem('cart'));
    cart.products.push(product);
    localStorage.setItem('cart', JSON.stringify(cart));
  }

  window.location = "html/cart.html"
}

我使用它来检索cart.html页面中的存储数据

var cart = localStorage.getItem("cart")
console.log("This is what is in mycart", cart)

这样可以成功检索产品数据。我遇到的问题是，我希望能够存储超过1种产品的产品数据，即使多个商品被添加到购物车，也只有一种产品数据可用。看来cart.products.push（产品）正在用新点击的产品替换现有产品。我发现我遇到的问题是，每当刷新浏览器时，阵列都会被清除并以空数组开始。我希望用户能够添加多个项目，这需要他们从产品页面返回到列表页面。我做错了什么，如何实施将多于1个产品及其数据添加到本地存储？

Answer 1

首先，您的条件localStorage && localStorage.getItem('cart')在第一次添加时失败，并且，由于cart永远不会被添加到其他任何地方（看似），这种情况总是会失败，并且什么都不会存储在那里

您的代码应该更像：

function addToCart(product) {
  if (localStorage) {
    var json = localStorage.getItem('cart') || '{"products": []}';
    var cart = JSON.parse(json);
    cart.products.push(product);
    localStorage.setItem('cart', JSON.stringify(cart));
  }

  window.location = "html/cart.html"
}

Answer 2

尝试使用IndexedDB，而不是使用本地存储。由于localStorage对于存储较少量的数据很有用，因此对于存储大量结构化数据没有多大用处。因此，如果您想存储大量结构化数据，例如存储产品详细信息，indexedDB是更好的选择。

使用IndexedDB的另一个好处是可以使用索引进行高性能搜索。它还提供同步和异步API。然而，正如您所看到的，在实践中，所有当前实现都是异步的，并且请求不会阻止加载用户界面。 IndexedDB是你应该选择的。

供您参考： https://www.w3.org/TR/IndexedDB-2/

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

在本地存储中存储数据无法正常工作

2 个答案: