0
59
ViewsCómo agregar varios objetos al almacenamiento local con la misma clave
Tengo este fragmento de código que lee datos de una hoja de Excel, los convierte en objetos y luego muestra sus detalles en una tarjeta de producto ordenada
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; });Lo que estoy tratando de hacer es, al hacer clic en "Comprar", agrega varios elementos al almacenamiento local, aunque me cuesta hacerlo y agregar varios, sigue agregando solo 1 de ellos y sobrescribiendo el anterior ( Supongo que debido al hecho de que tienen la misma clave)
Esto es lo que he intentado (que funciona, pero no es mi objetivo):
function addToCart(id){ let hoodie = hoodies[id]; localStorage.setItem('item', JSON.stringify(hoodie)); } y luego simplemente agrego la función addToCart() al botón, ¿alguien me guiaría y me ayudaría a descubrir cómo podría agregar varios al almacenamiento local y no solo seguir sobrescribiendo? Resultado Esperado:
1 answers
Answer question0
Puede usar localStorage#getItem para obtener la lista actual y JSON#parse para convertirla en una matriz de objetos. Luego, use Array#push para agregar el elemento actual y, finalmente, use localStorage#set y JSON#stringify para guardar la lista actualizada:
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'); } }Función para mostrar la lista guardada:
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> `, ''); }