如何使用相同的键向本地存储添加多个对象

Question

我有一段代码，它从excel工作表中读取数据，将它们转换为对象，然后将它们的细节显示在一张整洁的产品卡中。

let allHoodies = [
  ['Hoodie', 'Purple', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(1).jpg'],
  ['Hoodie', 'Blue', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(2).jpg'],
  ['Hoodie', 'Green', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(3).jpg']
]

allHoodies.forEach((element, index) => {
  let obj = {}
  obj.id = index
  obj.type = element[0]
  obj.color = element[1]
  obj.material = element[2]
  obj.price = element[3]
  obj.imagesrc = element[4]
  allHoodies[index] = obj
})

//Evaluating each hoodie and displaying its information in HTML
allHoodies.forEach(function(hoodie) {
  let card = `
        <div class="card">
            <img class="product-image" src="${hoodie.imagesrc}">
            <h1 class="product-type">${hoodie.type}</h1>
            <p>Color: ${hoodie.color}</p>
            <p>${hoodie.material} <a href="#" onclick="addToStorage(${hoodie.id})">Read more</a> </p>
            <p class="price">${hoodie.price}</p>
            <p><button>Buy</button></p>
        </div>
    `;

  // Add the card to the page
  document.getElementById('product-container').innerHTML += card;
});

我想要做的是，只要点击"Buy"，它就会在本地存储中添加多个条目，尽管我很难这样做，并且添加了多个条目，但是它仍然只添加了其中的一个，并覆盖了前面的一个条目(由于它们具有相同的键，所以假设它们具有相同的键)。

下面是我尝试过的(这很有效，但这不是我的目标)：

function addToCart(id){
    let hoodie = hoodies[id];
    localStorage.setItem('item', JSON.stringify(hoodie));
}

然后，我只需将addToCart()函数添加到按钮中，有人能指导我并帮助我弄清楚如何才能将多个函数添加到本地存储中，而不仅仅是继续覆盖吗？预期结果：

​

可运行的JSFiddle片段

Answer 1

您可以使用localStorage#getItem获取当前列表，并使用JSON#parse将其转换为对象数组。然后，使用Array#push添加当前项，最后使用localStorage#set和JSON#stringify保存更新后的列表：

function addToCart(id) {
  try {
    const hoodie = allHoodies[id];
    if(hoodie) {
      const items = JSON.parse(localStorage.getItem('items') || "[]");
      items.push(hoodie);
      localStorage.setItem('items', JSON.stringify(items));
    }
  } catch(e) {
    console.log('error adding item');
  }
}

函数以显示保存的列表：

​

function displayProductsinCart() {
  const products = JSON.parse(localStorage.getItem("item") || "[]");
  document.getElementById("item-container").innerHTML = products.reduce((cards, product) =>
    cards + `<div class="card">
            <img class="item-image" src="${product.image}">
            <h1 class="product-type">${product.type}</h1>
            <p>Color: ${product.color}</p>
             <p>${product.description}</p>
            <p class="price">${product.price} </p>
            <p><button>Buy</button></p>
        </div>
    `, '');
}

​