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

Question

我正在开发一个购物车应用程序，用户可以单击“添加到购物车”按钮，然后将特定项目添加到本地存储。当用户将产品添加到他们的购物车时，我需要能够检查该特定项目/价值/产品是否已经存在于本地存储中。如果是，我只需将该项目/价值/产品的计数增加 1。如果没有，我需要将一个全新的项目/价值/产品添加到本地存储，计数为 1。

我如何确定本地存储中是否已存在某件商品，并将其与用户尝试添加到购物车的当前商品的 ID 进行比较？我最初的几次尝试都惨遭失败，并且还没有在网上找到任何有助于解决这个问题的东西。有没有更好的方法来解决这个问题？任何帮助表示赞赏。即使是指向好页面的好链接也会非常有帮助。

下面是我必须尝试检查添加的 productid 是否与本地存储中的任何 productid 匹配的代码。基本上，如果要添加的 productId 与本地存储中项目的 productId 匹配，只需将数量加 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']);
  }

} }

有几个问题。首先，我不完全确定检索到的对象的 productId 是否与正在添加的对象进行比较。其次，for(var i = 0; i<length; i++){} 显然没有达到预期的效果，而是将要添加的项目数乘以 2。第三，可能与第二个问题有关，retrieveObject.push() 没有更新该产品，但正在向本地存储添加一个全新的条目。之前给定的答案似乎对我没有用，所以这就是我一直在做的事情。任何新的答案或一般帮助都会很棒。

PT 2. ：所以我在第一次进入本地存储时遇到了问题。无需注意，当本地存储中没有任何内容并且您调用以获取其中的项目时，它会返回 null 或 undefined。所以目前我的设置是这样的：

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", "count":1,"rJUg4uiGl":{"productPrice":"78.34","count":3}} 并且工作得很好。问题是正确格式化 b 的第一个条目。当我像这样更改第一个 if 语句中的代码时：

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

我在本地存储中得到一个空的 []，但是当我 console.log 时，它的格式是正确的。 [rJUg4uiGl：对象]。我一直坚持这一点，无法让它工作。再次，非常感谢任何帮助。

Answer 1

在obj 中拥有数据结构后，我建议使用以产品 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 节点包，您可以这样做

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

这是您的参考：

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

问候

更新：

在您的对象中搜索是另一回事...所以您想检查产品 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 结构的方法。

Answer 3

只需使用localstorage.getItem；如果密钥不存在，则返回 null。