Manejo de Errores en Local Storage para Tareas Dinámicas

Clase 24 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿Cómo solucionar conflictos con tareas precargadas en Local Storage?

Al desarrollar aplicaciones web, es esencial asegurar que el almacenamiento local (Local Storage) funcione de manera precisa y eficiente. En este artículo, se abordarán algunos errores comunes que pueden surgir con las tareas precargadas y cómo resolver estos inconvenientes.

¿Qué causa el problema de las tareas duplicadas?

El problema surge principalmente debido a tareas precargadas que están insertadas directamente en el código HTML, también conocido como "hardcoded". Al iniciar el gestor de tareas (TaskManager), se inserta al menos una tarea por defecto. Esto, aunque útil para fines didácticos o de muestra inicial, puede generar conflictos. El conflicto principal se manifiesta cuando la función de actualización del almacenamiento local (update local storage) escanea y guarda todas las etiquetas li presentes, duplicando sin querer algunas tareas.

¿Cómo se manifiesta este problema?

Tareas duplicadas: Al editar una tarea y guardar los cambios, la aplicación realiza un escaneo de todas las etiquetas li actuales y las guarda en el almacenamiento local.
Contenido no deseado: Estas tareas precargadas también se guardan, resultando en contenido redundante que se multiplica con cada modificación y refresco del navegador.

¿Cómo solucionar el bug en Local Storage?

La solución requiere eliminar las tareas precargadas del código HTML para evitar que se guarden innecesariamente en el almacenamiento local. Al seguir este proceso, se asegura que solo las tareas relevantes y dinámicas se gestionan en la aplicación.

Eliminar código hardcoded: Retirar las tareas predeterminadas del HTML.

<!-- Eliminar tareas precargadas -->
<ul id="task-container">
    <!-- Las tareas se agregarán dinámicamente aquí -->
</ul>

Actualizar Local Storage correctamente: Modificar la lógica para que solo las tareas generadas dinámicamente se escaneen y guarden en el almacenamiento local.

function updateLocalStorage() {
    const tasks = [];
    document.querySelectorAll('#task-container li').forEach(li => {
        tasks.push(li.textContent);
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

Probar y verificar: Asegurarse tras cada modificación que Local Storage solo contiene las tareas válidas y que ningún contenido no deseado se ha agregado.

Consejos prácticos para gestionar Local Storage

Revisar el código regularmente: Realizar auditorías de código para evitar elementos hardcoded que puedan generar conflictos.
Dinámico y modular: Mantener el código modular para que cada parte se encargue de una funcionalidad específica que se pueda ajustar sin afectar todo el sistema.
Pruebas continuas: Simular el flujo de usuario para confirmar que las tareas se comportan de la manera esperada después de añadir o modificar contenido.

Implementando estas recomendaciones, no solo eliminamos potenciales errores de almacenamiento duplicado, sino que mejoramos la eficacia general y la estructura de nuestras aplicaciones web. ¡Sigue explorando y aprendiendo para optimizar cada aspecto de tu desarrollo web!

Leonardo Salazar Serna

student•

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

Mario Figueroa Jimenez

student•

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

student•

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

student•

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

student•

Gracias! Me funcionó perfecto

Luis David Puente Rodriguez

student•

interesante resolución

Carlos Andres Arteaga escobar

student•

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)); }

Andres giovanny lopez cortes

student•

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

Juan David Santamaria Gomez

student•

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

Melissa Diaz

student•

No era mejor sencillamente actualizar las tareas desde el LocalStorage?

Juan David Soriano

student•

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

Rodrigo Medina

student•

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

student•

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 ??

Manejo de Errores en Local Storage para Tareas Dinámicas

Entendiendo el DOM

Manipulación del DOM con JavaScript y APIs

Entendiendo el DOM y su Manipulación con JavaScript

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

Navegación Jerárquica del DOM en JavaScript

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

Eliminar Elementos del DOM con JavaScript: Métodos y Ejemplos

Clonación y Reemplazo de Elementos en JavaScript

Manipulando Eventos en el DOM

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

Manejo de Eventos en JavaScript: click, mouseOver y mouseOut

Manipulación de Eventos en JavaScript para Interacción de Elementos

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

Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas

Creando un Administrador de Tareas

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

Interactividad en Botones de Tareas: Borrar y Editar en JavaScript

Persistencia de Datos con Local Storage en Tareas Web

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