Hola chicos, ¿pueden explicarme por qué sigo perdiendo mis secciones después de actualizar la página? esta es mi sección, necesito mantenerla, lo hago correctamente, los verifico a continuación, puedes ver el forEach donde lo devuelvo, pero básicamente, después de actualizar pierdo mi sección,
aquí está el código: https://jsfiddle.net/adulik/8sqbcox2/32/
function createTaskInput(listName) { //checking if storage is empty we add empty array if (localStorage.getItem('sections') === null) { localStorage.setItem('sections', '[]') } const form = createElement('form', '', 'task-form'); const input = createElement('input', ''); const button = createElement('button', ''); const id = `task-${listName}`; input.name = 'task'; input.id = id; button.innerText = 'Add'; let sections_array = JSON.parse(localStorage.getItem('sections')) sections_array.push(listName) localStorage.setItem('sections', JSON.stringify(sections_array)) sections_array.forEach((section)=>{ console.log("section",section) updateStyle() }) button.addEventListener('click', function (event) { event.preventDefault(); addTaskListItem(id); }); form.append(input); form.append(button); return form; }Puede almacenar los datos en el almacenamiento local, luego crear una función que obtenga la matriz del almacenamiento local y la coloque en divs. también puedes llamar a la función en window.load
Esto es posible con window.localStorage o window.sessionStorage. La diferencia es que sessionStorage dura mientras el navegador permanece abierto, localStorage sobrevive más allá de los reinicios del navegador. La persistencia se aplica a todo el sitio web, no solo a una sola página.
Cuando necesite establecer una variable que deba reflejarse en la(s) página(s) siguiente(s), utilice:
var someVarName = "value"; localStorage.setItem("someVarKey", someVarName);Y en cualquier página (como cuando la página se ha cargado), obténgalo como:
var someVarName = localStorage.getItem("someVarKey");.getItem() devolverá un valor nulo si no hay ningún valor almacenado, o el valor almacenado.
Tenga en cuenta que solo los valores de cadena se pueden almacenar en este almacenamiento, pero esto se puede solucionar usando JSON.stringify y JSON.parse . Técnicamente, siempre que llame a .setItem() , llamará a .toString() en el valor y lo almacenará.
La guía de almacenamiento DOM de MDN (vinculada a continuación) tiene soluciones alternativas/polyfills, que terminan recurriendo a cosas como cookies, si localStorage no está disponible.
No sería una mala idea usar una biblioteca existente o crear su propia mini biblioteca que abstraiga la capacidad de guardar cualquier tipo de datos (como objetos literales, matrices, etc.).