通过现有密钥更新localStorage阵列中的值

Question

我正在创建一个javascript购物车。

以下是我如何将产品添加到购物车中：

function addToCart(id, qty){    
var basket = []
basket.push({
product_id: id,
quantity: qty
});
localStorage.setItem('basket', JSON.stringify(basket));
}

现在，如果id已经存在，我只尝试从localStorage更新当前的basket

当我添加相同的产品id时，它就是在复制它。

[{"product_id":"10", "quantity":"1"}, {"product_id":"10", "quantity":"1"}]

我只想增加quantity，比如：

[{"product_id":"10", "quantity":"2"}]

尝试了几种方法，每种方法都没有成功：(

请帮忙吗？

Answer 1

您每次都替换存储的数组，这不会出现您所描述的问题，除非您的函数中没有真正的var basket = []。但您所描述的问题可能是由于没有检查具有产品ID的现有条目而导致的。

相反：

1. 将阵列保留在内存中，而不仅仅是本地存储
2. 页面加载时从本地存储加载
3. 更改内存副本时在本地存储中更新
4. 当用户完成购买或清空购物篮时，将其从本地存储中移除

对于#1和#2：在一个对代码全局的地方(但理想情况下不是全局的(：

var basket = JSON.parse(localStorage.getItem("basket")) || [];

对于#3：

function rememberBasket() {
localStorage.setItem('basket', JSON.stringify(basket));
}
function addToCart(id, qty){
// See if product exists
var entry = basket.find(function(e) { return e.product_id == id; });
if (entry) {
entry.quantity += qty; // Or just `= qty` to replace rather than adding
} else {
basket.push({
product_id: id,
quantity: qty
});
}
rememberBasket();
}

对于#4，当然：

basket = [];
rememberBasket();

---

您的原始代码都是ES5及更早版本，所以我坚持上面的内容，但ES2015+功能会使其更加简洁。

Answer 2

解决方案：

function addToCart(id, qty) {
var newItem = true;
var basket = json.parse(localStorage.getItem('basket'));
basket.forEach(function (item){
if(item.product_id == id) {
item.quantity += qty;
newItem = false;
}
})
if(newItem) {
basket.push({
product_id: id,
quantity: qty
});
localStorage.setItem('basket', JSON.stringify(basket));
}
}

Answer 3

首先，您需要尝试从localStorage中读取篮子，而不是每次都从一个空数组开始。其次，我建议您使用对象而不是数组。您的产品已经有了id，所以与其每次都搜索数组，不如让语言为您进行关键字查找。最后，您错过了如何更新购物车中现有商品的任何处理方法。以下是我的方法，既支持向购物车添加新商品，又支持增加现有商品的数量。

function addToCart(id, qty){    
var basket = JSON.parse(localStorage.getItem('basket')) || {};
if (basket[id]) {
basket[id] += qty;
} else {
basket[id] = qty;
}
localStorage.setItem('basket', JSON.stringify(basket));
console.log(basket);
}
addToCart(1,1);
addToCart(2,1);
addToCart(1,1);
addToCart(3,2);
addToCart(3,1);
// results in:
VM222:9 {1: 1}
VM222:9 {1: 1, 2: 1}
VM222:9 {1: 2, 2: 1}
VM222:9 {1: 2, 2: 1, 3: 2}
VM222:9 {1: 2, 2: 1, 3: 3}

Answer 4

试试这个

function addToCart(id, qty){    
var basket = JSON.parse(localStorage.getItem('basket'));
var isExists = false;
if(basket === null || basket === undefined){
basket = [];
}
basket.reduce(function(o,i){
if(i.product_id === id){
i.quantity += qty;isExists = true;
}
o.push(i);
return o;
},[]);
if(!isExists){

basket.push({
product_id: id,
quantity: qty
});}
localStorage.setItem('basket', JSON.stringify(basket));
}