tengo el siguiente código que genera un nuevo elemento en una matriz en mi almacenamiento local cada vez que hago clic en un botón
let addCartItemButtons = document.getElementsByClassName('product-description-add') for (let i = 0; i < addCartItemButtons.length; i++){ let button = addCartItemButtons[i] button.addEventListener('click', function(event){ let buttonClicked = event.target let getTitle = buttonClicked.parentElement.parentElement.parentElement.querySelector('.product-title').innerText let getImage = buttonClicked.parentElement.parentElement.parentElement.querySelector('.product-header img').src let getColor = buttonClicked.parentElement.parentElement.querySelector('.product-description-text li span').innerText let getSize = buttonClicked.parentElement.parentElement.querySelector('.product-description-text li select').value let getPrice = buttonClicked.parentElement.parentElement.querySelector('.product-description-price').innerText let getSpan = buttonClicked.parentElement.parentElement.querySelector('li span').getAttribute('id') let oldItems = JSON.parse(localStorage.getItem('newProduct')) || []; let newItem = { 'id': i+1, 'title': getTitle, 'image': getImage, 'color': getColor, 'size': getSize, 'price': getPrice, 'spanid': getSpan, }; let data = JSON.parse(localStorage.getItem('newProduct')) if(localStorage.getItem('newProduct') == null) { oldItems.push(newItem); localStorage.setItem('newProduct', JSON.stringify(oldItems)); } else { if(data.indexOf(newItem) == -1){ oldItems.push(newItem); localStorage.setItem('newProduct', JSON.stringify(oldItems)); }else{ alert('element already added') } } }) }Mi problema es que he intentado crear una validación para verificar si el elemento ya se agregó al almacenamiento local, entonces en ese caso debería aparecer la alerta, pero no funciona en absoluto y todavía puedo agregar un elemento a mi almacenamiento local después de agregarlo por primera vez. No puedo entender cómo resolver esto, ¿alguna idea? :)
Están surgiendo problemas porque los objetos no se comparan como iguales solo porque tienen los mismos valores de propiedad.
let oldItems = JSON.parse(localStorage.getItem('newProduct')) || []; crea oldItems como una matriz vacía o una matriz de objetos recién creados con valores de propiedad que representan elementos anteriores en los que se hizo clic y se guardaron.
let data = JSON.parse(localStorage.getItem('newProduct')) también creará una matriz de nuevos objetos para los botones anteriores en los que se hizo clic, si hubiera alguno, pero no contendrá los mismos objetos que oldItems porque JSON.parse crea nuevos objetos cada vez que se llama.
La definición newItem también crea un nuevo objeto que no será el mismo objeto que ninguna de las entradas en oldItems o data .
Para resolver el problema, puede agregar códigos de producto únicos a todos los artículos, de modo que pueda buscar datos anteriores para encontrar una coincidencia basada solo en el código del producto, o escribir una rutina de comparación para verificar todas las propiedades que necesitan diferenciarse (como el color).
Personalmente, intentaría agregar una identificación de producto a los datos de la página, buscarla entre los elementos anteriores y, si las identificaciones de productos coinciden, entonces se hizo clic en el elemento antes (pero el cliente podría estar ordenando un color diferente).
Tenga cuidado al usar el contador de bucle de botón como valor de id , o incluso la cadena de origen de la imagen; es fácil imaginar formas en que podrían salir mal o verse comprometidas por cambios de página fuera de su control.
Entonces, gracias por la ayuda que recibí de @traktor, pude encontrar una solución a este problema. Agregué un producto de datos a cada producto y luego lo pasé como 'id' a localstorage. Luego verifico si hay algún elemento en mi matriz que contenga la misma ID en la que estoy haciendo clic y si hay algún resultado, se ejecuta una alerta. De lo contrario, el elemento se guarda.
let addCartItemButtons = document.getElementsByClassName('product-description-add') for (let i = 0; i < addCartItemButtons.length; i++){ let button = addCartItemButtons[i] button.addEventListener('click', function(event){ let buttonClicked = event.target let getProdId = buttonClicked.parentElement.parentElement.parentElement.getAttribute('data-prodid') let getTitle = buttonClicked.parentElement.parentElement.parentElement.querySelector('.product-title').innerText let getImage = buttonClicked.parentElement.parentElement.parentElement.querySelector('.product-header img').src let getColor = buttonClicked.parentElement.parentElement.querySelector('.product-description-text li span').innerText let getSize = buttonClicked.parentElement.parentElement.querySelector('.product-description-text li select').value let getPrice = buttonClicked.parentElement.parentElement.querySelector('.product-description-price').innerText let getSpan = buttonClicked.parentElement.parentElement.querySelector('li span').getAttribute('id') let oldItems = JSON.parse(localStorage.getItem('newProduct')) || []; let newItem = { 'id': getProdId, 'title': getTitle, 'image': getImage, 'color': getColor, 'size': getSize, 'price': getPrice, 'spanid': getSpan, }; if(localStorage.getItem('newProduct') == null) { oldItems.push(newItem); localStorage.setItem('newProduct', JSON.stringify(oldItems)); } else { let data = JSON.parse(localStorage.getItem('newProduct')) let idCheck = data.filter(x => x.id === newItem.id).map(x => x.foo); let idCheckResults = idCheck.length if(idCheckResults > 0){ alert('element already added') }else{ oldItems.push(newItem); localStorage.setItem('newProduct', JSON.stringify(oldItems)); } } let windowCartProducts = JSON.parse(window.localStorage.getItem("newProduct")); let productsInCart = document.getElementById('cartProducts') let productsAdded = 0 for(let i = 0; i < windowCartProducts.length; i++){ productsAdded = windowCartProducts.length } productsInCart.innerHTML = productsAdded + `<i class="fas fa-shopping-cart"></i>` }) }