如何檢查本地存儲中是否已存在項目/值

Question

我正在使用購物車應用程序，用戶可以單擊“添加到購物車”按鈕，然后將特定項目添加到本地存儲中。 當用戶將產品添加到他們的購物車中時，我需要能夠檢查該特定項目/值/產品在本地存儲中是否已經存在。 如果是這樣，我只需要將該項目/值/產品的數量增加1。否則，我需要將一個全新的項目/值/產品的本地數量添加為1。

如何查找本地存儲中是否已存在商品，並將其與用戶試圖添加到購物車中的當前產品的ID相比較？ 我的前幾次嘗試都失敗了，但還沒有找到任何可以解決此問題的在線方法。 有沒有更好的方法來解決這個問題？ 任何幫助表示贊賞。 即使是指向良好頁面的良好鏈接也將非常有幫助。

下面是我必須嘗試檢查要添加的產品ID是否與本地存儲中的任何產品ID相匹配的代碼。 基本上，如果要添加的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。第三，這可能與第二個問題有關， resolveObject.push（）不會更新產品的數量，而是會向本地存儲中添加一個全新的條目。 給出的答案似乎對我沒有幫助，所以這就是我一直在努力的事情。 任何新的答案或一般幫助都很好。

PT 2 ：：因此，我第一次進入本地存儲設備時遇到問題。 無需注意，當本地存儲中沒有任何內容並且您調用以獲取其中的項目時，它返回null或未定義。 因此，目前我將其設置如下：

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 obj時，它的格式正確。 [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新條目push入數組。 只需更新現有的。

Answer 2

假設您正在使用localStorage節點包，則可以執行

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

這是您的參考：

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

問候

更新：

在對象中搜索是另一lodash ...所以您想檢查一下產品編號是否存在，然后可以使用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 。