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

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