Manejo de Errores en Local Storage para Tareas Dinámicas

Curso de JavaScript: Manipulación del DOM

Contenido del curso

Entendiendo el DOM

Seleccionando y Accesando a Elementos del DOM

Manipulando Elementos del DOM

Manipulando Eventos en el DOM

Asincronía en JavaScript

20
Cómo JavaScript ejecuta código asíncrono
04:36 min

Creando un Administrador de Tareas

Tomar examen

Manejo de Errores en Local Storage para Tareas Dinámicas

Resumen

Cuando trabajas con un task manager dinámico y notas que cada vez que editas o refrescas la página aparecen tareas duplicadas llamadas "task contents", estás frente a un bug muy común relacionado con código hardcodeado en HTML y la forma en que se actualiza el local storage. Entender por qué ocurre y cómo resolverlo es fundamental para que tu aplicación funcione correctamente.

¿Por qué aparecen tareas duplicadas al editar y refrescar?

El problema tiene su origen en dos elementos que entran en conflicto. Por un lado, existe código hardcodeado en el HTML [0:10] que incluye una tarea de ejemplo para que, al iniciar el task manager, al menos haya un elemento visible. Por otro lado, la función de update local storage [1:04] realiza un escaneo de todas las etiquetas <li> que existen en el DOM en ese momento y guarda esa "radiografía actual" en local storage.

El conflicto funciona así:

Al editar una tarea, la función de update copia el texto de todos los <li> actuales, incluyendo el que está hardcodeado.
Cuando haces refresh, el HTML vuelve a cargar el elemento hardcodeado.
Además, local storage inyecta las tareas que tenía guardadas.
El resultado: la tarea hardcodeada se duplica con cada ciclo de edición y refresco.

Este ciclo se repite indefinidamente. Cada vez que editas, la radiografía crece porque incluye tanto el elemento fijo del HTML como las tareas almacenadas previamente [2:10].

¿Qué significa código hardcodeado en este contexto?

Cuando se dice que algo está hardcodeado, significa que el contenido no se genera de forma dinámica mediante JavaScript, sino que está escrito directamente en el archivo HTML. En este caso, la tarea "task contents" existía como ejemplo visual estático. Al pasar a una página dinámica donde las tareas se crean y gestionan con JavaScript, ese elemento fijo ya no tiene sentido y genera conflictos.

¿Cómo se corrige el bug de local storage?

La solución es sencilla y directa [2:40]:

Eliminar el código hardcodeado del HTML.
Dejar únicamente el contenedor vacío donde se inyectarán las tareas de forma dinámica.
Borrar los registros duplicados de "task contents" que quedaron almacenados en local storage.

Una vez que el contenedor está limpio, la radiografía inicial solo contiene las tareas reales que el usuario ha creado. Por ejemplo, si tienes "tarea uno" y "tarea dos modificada", esas serán las únicas que el escaneo de <li> capturará [3:05].

¿Cómo verificar que el problema quedó resuelto?

Después de aplicar la corrección, puedes comprobarlo con estos pasos:

Edita cualquier tarea existente y guarda los cambios.
Refresca la página con refresh.
Revisa que solo aparezcan las tareas que creaste, sin duplicados.
Inspecciona el contenido de local storage en las herramientas de desarrollo del navegador para confirmar que no hay entradas repetidas.

Al refrescar [3:25], el escaneo ahora solo detecta los <li> actuales (los que realmente importan) y eso es exactamente lo que se guarda. Ya no hay elemento hardcodeado que se sume a la lista.

Este tipo de bug es un recordatorio importante: cuando transicionas de una página estática a una dinámica, asegúrate de limpiar todo el contenido de ejemplo que ya no forma parte del flujo de datos de tu aplicación. Si te ha pasado algo similar o tienes otra forma de resolverlo, comparte tu experiencia.

Comentarios9

Leonardo Salazar Serna

Estudiante

La clase anterior quedó incompleta o hace falta una clase entre la 23 y 24

Mario Figueroa Jimenez

Estudiante

Después de taskItem.remove(); en la función deleteTask, debes incluir la llamada a updateLocalStorage();.

Esto es necesario porque, en lugar de editar un solo elemento en el almacenamiento local, lo que hace updateLocalStorage(); es recargar toda la lista de tareas en el objeto tasks del LocalStorage. Por esta razón, es útil usar esta misma función en deleteTask para asegurar que la lista esté siempre actualizada después de eliminar una tarea.

Alejandro Martinez

Estudiante

Yo me estaba complicando la vida creando una función nueva para eliminar el elemento del localStorage... Pero lo de llamar updateLocalStorage() en el deleteTask es mil veces mejor

Kyb3r Cipher

Estudiante

Yo para no tener que eliminar la tarea persisitente lo que hice fue que al actualizar una tarea filtrara esa primer tarea 'hardcodeada' y no la agregara:

Agregue primero un id para el filter:

<li id="persistent-task">
  // code...
</li>
```Y en js filtre esa task para que no la agregue al actualizar:

js:

```js
function updateTaskInLocalStore() {
    const tasks = Array.from(taskList.querySelectorAll("li"))
        .filter((li) => li.id !== "persistent-task")
        .map((li) => li.firstChild.textContent)
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

Any Omaña

Estudiante

Gracias! Me funcionó perfecto

Luis David Puente Rodriguez

Estudiante

interesante resolución

Carlos Andres Arteaga escobar

Estudiante

este es el código nuevo que hace falta que el profe no explico o editaron y borraron function removeLocalStorage(taskcontent){ const tasks = JSON.parse(localStorage.getItem("tasks") || " [] "); const updateTasks = tasks.filter((task) => task !== taskcontent); localStorage.setItem("tasks", JSON.stringify(updateTasks)); }

Juan David Santamaria Gomez

Estudiante

Me tomo dos horas entender que si ejecutaba la funcion de updatelocalstorage inmediatamente cauando elimino la tarea realiza la limpieza sin necesidad de otra funcion...zzzzzzzzzzzzzzzz

Julio Manuel Nieto

Estudiante

Si, yo imagine lo mismo antes de pasar a esta clase. Y ahora que lo estaba viendo pense, "¿Que codigo agrego para actualizar los datos en el localStorage cuando se borran?" y era el mismo que ya se hizo antes jaja solo es agregar la llamada de la funcion update en la funcion deleteTask

Andres giovanny lopez cortes

Estudiante

las clases estan incompletas desde la 20 hasta aqui la funcion de botones flata en esta clase en particular debemos agregrar

function removeFromLocalStorage(taskContent) { const tasks = JSON.parse(localStorage.getItem("tasks") || "[]"); const updateTasks = tasks.filter((task) => task !== taskContent); localStorage.setItem("tasks", JSON.stringify(updateTasks)); } debajo del UPDATE

Melissa Diaz

Estudiante

No era mejor sencillamente actualizar las tareas desde el LocalStorage?

Juan David Soriano

Estudiante

Les comparto mi código y diseño. Utilicé IDs para una mejor consistencia de datos.

Rodrigo Medina

Estudiante

quiero compartir mi versión del programa.

Nótese que trabaje diferente y usando objetos. Probablemente la mayor diferencia sea el rendimiento (no lo se aun)

HTML:

<!DOCTYPE ``html``><html ``lang``="``en``"><head> <meta ``charset``="``UTF-8``"> <meta ``name``="``viewport``" ``content``="``width=device-width, initial-scale=1.0``"> <title>Document</title> <link ``rel``="``stylesheet``" ``href``="``./style.css``"></head><body> <main> <form ``id``="``form``"> <label ``for``="``name``">Tarea</label> <input ``type``="``text``" ``name``="``name``" ``id``="``task``"> <button ``type``="``submit``">Asignar</button> </form> <ul ``name``="``area``" ``id``="``area``"> </ul> </main> <script ``src``="``./forms.js``"></script></body></html>

JS:

const`` form = ````js ````document.getElementById("``form``");``const`` area = document.getElementById("``area``"); loadTasks();//`` localStorage.clear(); Clean Storage form.addEventListener("``submit``", (``event``) ``=>`` { event.preventDefault(); ``const`` value = document.getElementById("``task``").value; //`` get task content`` ``const`` task = createTask(value); //`` call func //`` task.firstChild.textContent -> string value from object`` area.appendChild(task); //`` add item to the list`` storeInStorage(task.firstChild.textContent);}); area.addEventListener("``click``", (``event``) ``=>`` { event.preventDefault(); ``const`` task = event.target ``if`` (task.classList.contains("``btn``")){ ``if``(task.classList.contains("``modify``")){ ``const`` str = prompt("``Coloca la edicion a continuacion: ``"); modifyTask(task, str); } ``else`` ``if``(task.classList.contains("``delete``")) { task.parentElement.remove() //`` Delete button action`` updateStorage(); //`` Don't save in storage what is remove`` } }}); /**`` * * ``@``param ``{``string``}`` str * ``@``returns listItem ``*/``function`` createTask(``str``) { ``const`` li = document.createElement("``li``"); //`` create element`` li.classList.add("``task``"); //`` get class to element`` li.textContent = str; //`` set content //`` Adding buttons`` li.append(setButton(1)); li.append(setButton(2)); ``return`` li;} /**`` * * ``@``param ``{``number``}`` kind * ``@``returns button ``*/``function`` setButton(``kind``) { ``const`` btn = document.createElement("``button``"); //`` HTML element creation`` btn.classList.add("``btn``"); //`` Add CSS class //`` Buttons types`` ``if``(kind == 1) btn.classList.add("``modify``"); ``else`` ``if``(kind == 2) btn.classList.add("``delete``"); ``return`` btn;} function`` modifyTask(``task``,``str``) { task.parentElement.firstChild.textContent = str; updateStorage();} function`` storeInStorage(``task``){ ``const`` tasks = JSON.parse(localStorage.getItem("``tasks``") || "``[]``"); tasks.push(task); localStorage.setItem("``tasks``", JSON.stringify(tasks));} function`` loadTasks(){ ``const`` tasks = JSON.parse(localStorage.getItem("``tasks``") || "``[]``"); tasks.forEach((``task``) ``=>`` { area.appendChild(createTask(task)); });} function`` updateStorage() { ``const`` tasks = Array.from(area.querySelectorAll("``li``")).map((``li``) ``=>`` li.firstChild.textContent); localStorage.setItem("``tasks``", JSON.stringify(tasks)); //`` console.log(tasks);``}

Diego Andrés Rojas Pinzón

Estudiante

hola buenas, mi pregunta es referente al "scaneo" de los li, ya que si llego a tener 10 Li esto podrá afectar el rendimiento en el dom? por qué el proyecto lo hice tipo cuadro de tareas o scrunboard y a medida que editas unas tarea o la creas, está solita se actualiza en el LocalStorage sin tener que escanear todo, entonces la pregunta es cuál sería una mejor práctica la de escanear todos los li o solo uno ??

<li id="persistent-task">
  // code...
</li>
```Y en js filtre esa task para que no la agregue al actualizar:

js:

```js
function updateTaskInLocalStore() {
    const tasks = Array.from(taskList.querySelectorAll("li"))
        .filter((li) => li.id !== "persistent-task")
        .map((li) => li.firstChild.textContent)
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

Manejo de Errores en Local Storage para Tareas Dinámicas

Entendiendo el DOM

Qué es el DOM y cómo JavaScript lo cambia

Qué es el DOM y cómo funciona

Diferencias entre el DOM y el objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

Selección de Elementos del DOM con JavaScript

Navegar o DOM por relações de parentesco

Manipulando Elementos del DOM

Atributos y Propiedades en HTML y su Manipulación con JavaScript

Modificar texto en HTML con JavaScript

Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName

Uso de classList para Manipular Clases en Elementos HTML

Manipulación del DOM con innerHTML e InsertAdjacentHTML

Agregar elementos HTML sin reemplazar contenido existente

Creación y Manipulación de Elementos DOM con createElement

remove() vs removeChild() en el DOM

Clonación y Reemplazo de Elementos en JavaScript

Manipulando Eventos en el DOM

Eventos y Flujo en Programación Web: Capturing y Bubbling

Eventos del mouse y clic en JavaScript

Qué es event.target y cómo usarlo

Validación de Formularios con JavaScript: Prevenir Comportamiento por Defecto

Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas

Asincronía en JavaScript

Cómo JavaScript ejecuta código asíncrono

Creando un Administrador de Tareas

Creación de un Task Manager con Persistencia usando Local Storage

Editar y borrar tareas con delegación de eventos

Persistencia de Datos con Local Storage en Tareas Web

Guardado y edición de tareas en local storage con JavaScript

Manejo de Errores en Local Storage para Tareas Dinámicas

Persistencia de tema dark/light con localStorage

Creación de Páginas Web Dinámicas con JavaScript

Resumen