如何检查项目/值是否已经存在于本地存储中

Question

我正在从事购物车应用程序上的用户可以单击"添加到购物车"按钮，然后将特定项目添加到本地存储中。当用户将产品添加到他们的购物车中时，我需要能够检查该特定项目/价值/产品是否已经存在于本地存储中。如果是这样，我只需要将该项目/价值/产品的计数增加1。

如何找到一个项目是否已经存在于本地存储中，并将其与用户试图添加到购物车的当前产品的ID进行比较？我的前几次尝试失败了，尚未在网上找到有助于解决这个问题的任何东西。有更好的方法吗？任何援助都将不胜感激。即使是一个好的页面的良好链接也将非常有帮助。

以下是我必须尝试检查添加的productid是否匹配本地存储中的任何生产物的代码。基本上，如果要添加的造成生产物与本地存储中的项目的构建ID匹配，则只需将1添加到数量中即可。

var retrieverObject = localStorage.getItem('Products');
var retrieveObject = JSON.parse(retrieverObject);
var data = {};
var productId = currentNode.name;
var product = currentNode;
data.productPrice = product.parentNode.previousSibling.previousSibling.id;
data.productId = productId;
var length = retrieveObject.length;
console.log(length);
for(var i = 0; i<length; i++){
  if(retrieveObject[i].productId == data.productId){
    var quantity = retrieveObject[i].quantity;
        retrieveObject.push({"productPrice": data.productPrice, "productId": data.productId, "quantity": quantity++});
  }else{
        retrieveObject.push({"productPrice": data.productPrice, "productId": data.productId, "quantity": 1});
  }
}
console.log(retrieveObject);
localStorage.setItem('Products', JSON.stringify(retrieveObject));
var retrievedObject = localStorage.getItem('Products');
var obj = JSON.parse(retrieverObject);
var len = obj.length;
console.log(len);
  for(var i=0; i<len;i++){
    console.log(obj[i]['productPrice']+", "+obj[i]['productId']);
  }

}}

有一些问题。首先，我并不完全确定正在将检索到的对象的构成物与正在添加的对象进行比较。其次，for(var i = 0; i<length; i++){}绝对似乎没有做预期的事情，而是将添加的项目数量乘以2。但正在将整个新条目添加到本地存储中。给定的答案似乎对我没有工作，所以这就是我一直在研究的。任何新的答案或一般帮助都会很棒。

pt 2.：所以我在第一个进入本地存储的条目中遇到了问题。没有注意到，当本地存储中没有任何东西，您打电话给其中的物品，它将返回零或未定义。因此，我目前已经设置了这样的设置：

if(localStorage.getItem("Products") === null || localStorage.getItem("Products") === undefined){
  var data = {};
  var productId = currentNode.name;
  var product = currentNode;
  data.productPrice = product.parentNode.previousSibling.previousSibling.id;
  data.productId = productId;
  var obj = [];
  obj = obj[data.productId] = {
    productPrice: data.productPrice,
    count: 1
  };
  console.log(obj);
  localStorage.setItem('Products', JSON.stringify(obj));
}
else{
  var retrieverObject = localStorage.getItem('Products');
  var retrieveObject = JSON.parse(retrieverObject);
  var data = {};
  var productId = currentNode.name;
  var product = currentNode;
  data.productPrice = product.parentNode.previousSibling.previousSibling.id;
  data.productId = productId;
  if(retrieveObject[data.productId]){
    retrieveObject[data.productId].count++;
  }else{
    retrieveObject[data.productId] = {
      productPrice: data.productPrice,
      count: 1
};
  }
console.log(retrieveObject);
localStorage.setItem('Products', JSON.stringify(retrieveObject));
}

这是在本地存储中创建的第一个条目，看起来像这样：{" ProductPrice"：" 78.34"，" Count"：1}，然后在添加其他人时看起来像这样：{" ProductPrice"：" 78.34"，"，"，" 78.34"，" count"：1，" rjug4uigl"：{" productPrice"：" 78.34"，" count"：3}}，工作正常。问题是首先要正确地进行B格式化。当我在第一个if语句中更改代码时：

var obj = [];
      obj[data.productId] = {
        productPrice: data.productPrice,
        count: 1
      }

我在本地存储中得到一个空[]，但是当我安装obj时，它是正确格式的。[rjug4uigl：对象]。我一直陷入困境，无法使它起作用。同样，任何帮助都将不胜感激。

Answer 1

在obj中拥有数据结构后，我建议将词典与product ID一起用作键。

添加订单或其他位置：

obj.push({"productPrice": data.productPrice, "productId": data.productId});

使用：

if (obj[data.productId]) { // if the entry exists,
  // increment the count
  obj[data.productId].count++;
} else { // if it doesn't,
  // add a new entry with count = 1
  obj[data.productId] = {
    productPrice: data.productPrice,
    count: 1
  };
}

这是一个完整的功能，包括localStorage处理：

function addToCart(productID, productPrice) {
  // get the current cart, or an empty object if null
  var cart = JSON.parse(localStorage.getItem("Products")) || {};
  // update the cart by adding an entry or incrementing an existing one
  if (cart[productId]) {
    cart[productId].count++;
  } else {
    cart[productId] = {
      productPrice, // shorthand for `productPrice: productPrice,`
      count: 1
    };
  }
  // put the result back in localStorage
  localStorage.setItem("Products", JSON.stringify(cart));
}

上面的解决方案是可取的，因为您可以在整个列表中检查productId而不循环。如果您真的想要保持您的当前数据结构，则可以这样更新它：

var length = retrieveObject.length;
console.log(length);
for (var i = 0; i < length; i++) {
  if (retrieveObject[i].productId == data.productId) {
    retrieveObject[i].quantity++; // update the entry in the array
  } else {
    retrieveObject.push({
      productPrice: data.productPrice,
      productId: data.productId,
      quantity: 1
    });
  }
}

请注意，您不应该push进入数组的新条目；只需更新现有的。

Answer 2

只需使用 localstorage.getItem;如果键尚不存在，它将返回null。

Answer 3

假设您正在使用localStorage节点软件包，您可以做

if (localStorage.getItem('Products') !== null) {
   localStorage.setItem('Products', JSON.stringify(obj));
}

这是您的参考：

https://www.npmjs.com/package/localstorage

问候

更新：

在您的objet中搜索是一个不同的故事...因此，您想检查产品ID是否存在，然后可以使用lodash

搜索它

var _ = require('lodash');
// the rest of your code to get the data.productId set
if (localStorage.getItem('Products') !== null) {
   var arrayOfProducts = localStorage.getItem('Products');
   var existingProducts = _.filter(arrayOfProducts, function (product) { return product.productId === data.productId });
   if (existingProducts.length > 0) {
      // product found, do your logic
   }
}

以下是lodash信息https://www.npmjs.com/package/lodash

另一个选项是使用词典，并将productId作为key，然后使用Object.keys搜索它...我提供了一种不会改变您的JSON结构的方法。