Quiero agregar algunos valores a un contenedor y guardarlos en el almacenamiento local, pero cuando hago clic en el botón para agregarlos después de la primera vez, los elementos se duplican en el contenedor, no en el almacenamiento local.
Lo extraño es que cuando recargo la página, los duplicados desaparecen y los elementos aumentan según la cantidad de elementos que agregué, solo aquí está mi código:
let divP = document.querySelector(".parent"); let input = document.querySelector("input"); let button = document.querySelector("button"); let container = document.getElementById("container"); let array = JSON.parse(localStorage.getItem("array")) || []; let isUpdate = false; function createElement() { array.forEach((arr, id) => { let div = document.createElement("div"); div.classList.add("div"); div.id = id; div.innerHTML = arr.title; container.appendChild(div); }); } createElement(); button.addEventListener("click", (e) => { e.preventDefault(); let title = input.value.trim(); let id = Date.now(); if (title || id) { let arrayInfo = { title, id }; if (!isUpdate) { array.push(arrayInfo); } else { isUpdate = false; } localStorage.setItem("array", JSON.stringify(array)); createElement(); } });Puedes borrar los divs así:
function createElement() { const divs = document.querySelector('.div'); divs.forEach((div) => { div.remove(); }); array.forEach((arr, id) => { let div = document.createElement("div"); div.classList.add("div"); div.id = id; div.innerHTML = arr.title; container.appendChild(div); }); } Tenga en cuenta que borrará todos los elementos con la clase div .
Tenga en cuenta que cada vez que ejecuta "createElement" agrega todos los elementos de la matriz al dom. Entonces los elementos se siguen acumulando sin salida. Para resolver esto, debe vaciar todos los divs anteriores, simplemente agregue la línea a continuación como primera línea de function createElement() :
container.innerHTML = "";