¿Cómo evito que se elimine el almacenamiento local después de recargar e insertar una nueva entrada de mis campos de entrada? Quiero mostrar los datos que guardé en una lista en HTML.
// when I add new items in my form and submit it, the old entries in local-storage gets deleted let datas = []; const addEntry = e => { e.preventDefault(); let data = { id: document.querySelector("#date").value, situation: document.querySelector("#situation").value, mood: document.querySelector("#mood").value, special: document.querySelector("#special").value, expectations: document.querySelector("#expectations").value, fulfilled: document.querySelector("#fulfilled").value, }; datas.push(data); console.log(datas); document.querySelector("form").reset(); localStorage.setItem("smokeEntries", JSON.stringify(datas)); }; let content; //get object and save in array variable const getEntriesFromLocalStorage = () => { content = [JSON.parse(this.localStorage.getItem("smokeEntries"))]; }; document.addEventListener("DOMContentLoaded", () => { document.querySelector("#submit").addEventListener("click", addEntry); });Personalmente, no intentaría mantener dos matrices ( datas y content ) sincronizadas, ya que puede causar problemas de inconsistencia como este en el que está usando una para actualizar y almacenar información en la administración de estado y la otra que se muestra visualmente no está sincronizada. Sugiero combinarlos así:
let content = []; const addEntry = e => { e.preventDefault(); let data = { id: document.querySelector("#date").value, situation: document.querySelector("#situation").value, mood: document.querySelector("#mood").value, special: document.querySelector("#special").value, expectations: document.querySelector("#expectations").value, fulfilled: document.querySelector("#fulfilled").value, }; content.push(data); document.querySelector("form").reset(); localStorage.setItem("smokeEntries", JSON.stringify(content)); }; const getEntriesFromLocalStorage = () => { content = [JSON.parse(localStorage.getItem("smokeEntries"))]; }; document.addEventListener("DOMContentLoaded", () => { document.querySelector("#submit").addEventListener("click", addEntry); }); También puede haber algún problema con la configuración del contenido (porque lo envolvemos entre corchetes ( [] ) pero puede que ya sea una matriz; debería ser bastante obvio después de ejecutarlo, elimine los corchetes si se convierte en matrices anidadas) pero no he ejecutado el código. También tenga en cuenta que para que el content cargue el "estado", deberá llamar a getEntriesFromLocalStorage() antes de usar el estado (o posiblemente desencadenar una nueva representación después).