[英]How to check if a item/value already exists in Local Storage
我正在使用购物车应用程序,用户可以单击“添加到购物车”按钮,然后将特定项目添加到本地存储中。 当用户将产品添加到他们的购物车中时,我需要能够检查该特定项目/值/产品在本地存储中是否已经存在。 如果是这样,我只需要将该项目/值/产品的数量增加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:对象]。 我一直在坚持这一点,但无法使其正常工作。 再次,任何帮助将不胜感激。
一旦您在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
入数组。 只需更新现有的。
假设您正在使用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结构的方法。
只需使用localstorage.getItem
; 如果键尚不存在,则返回null
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.