如果选择了新数据,如何从本地存储更新数据

时间:2018-09-07 04:39:35

标签: javascript jquery json local-storage

我正在创建一个订购系统,用户将选择一个项目并将其添加到购物车中。我使用本地存储来保存选定的项目并在下一页获得这些项目。

如果用户选择了相同的项目,我现在想更新存储的数据。

例如 我已经存储了

[{
 "id": "1",
 "name": "soap A",
 "quantity": "10",
 "price" : "50.00"
},
{
 "id": "2",
 "name": "soap X",
 "quantity": "10",
 "price" : "50.00"
}]

,然后用户再次选择id1的{​​{1}}和数量为"soap A"的商品,我的当前结果如下所示< / p>

"15"

我想做的是更新本地存储中是否存在具有相同ID的对象。看起来像这样

[{
     "id": "1",
     "name": "soap A",
     "quantity": "10",
     "price" : "50.00"
    },
    {
     "id": "2",
     "name": "soap X",
     "quantity": "10",
     "price" : "50.00"
    },
    {
     "id": "1",
     "name": "soap A",
     "quantity": "15",
     "price" : "50.00"
    }]

这是我插入本地存储的脚本。

[{
     "id": "1",
     "name": "soap A",
     "quantity": "25",
     "price" : "50.00"
    },
    {
     "id": "2",
     "name": "soap X",
     "quantity": "10",
     "price" : "50.00"
    }]

1 个答案:

答案 0 :(得分:3)

您需要在当前数组中find匹配id(如果存在)。如果是这样,则分配给该元素-否则,推送一个新元素。

const oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
const idToUse = $('#itemId').val();
const existingItem = oldItems.find(({ id }) => id === idToUse);
if (existingItem) {
  Object.assign(existingItem, {
    'name': $('#productName').val(),
    'quantity': existingItem.quantity + $('#quantity').val(),
    'price': $('#productPrice').val(),
  })
} else {
  const newItem = {
    'id' : idToUse,
    'name': $('#productName').val(),
    'quantity': $('#quantity').val(),
    'price': $('#productPrice').val(),

  };
  oldItems.push(newItem);
}

localStorage.setItem('itemsArray', JSON.stringify(oldItems));