Inspeccionando y solucionando errores en el código

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

¿Para qué aprender JavaScript?

¿Qué es DOM y Window Object?

Explorando Nodos del DOM

Seleccionando y Accesando a Elementos del DOM

Consultando el DOM con getElementById y querySelector

Navegación efectiva entre nodos

Manipulando Elementos del DOM

Modificando atributos y propiedades

Modificando texto en HTML

Modificando estilos en HTML

Modificando la visibilidad de elementos HTML

Creación de elementos con HTML Strings e insertAdjacentElement()

Agregando elementos con innerHTML e insertAdjacentHTML()

Creación de elementos con createElement()

Remover elementos con remove() y removeChild()

Clonación y reemplazo de elementos con cloneNode y replaceChild

Manipulando Eventos en el DOM

Entendiendo eventos y tipos: Burbuja, Captura y Propagación

Agregar y eliminar escuchadores de eventos o Event Listeners

El objeto evento o eventObject

Manejo de entradas de formulario y validación

Delegación de eventos y prevención de comportamiento predeterminado

Creando un Administrador de Tareas

Añadir tareas desde un formulario

Eliminar y editar tareas del DOM

Almacenamiento y carga de datos en localStorage

Eliminar y editar tareas del almacenamiento local

Inspeccionando y solucionando errores en el código

Personalizando la interfaz del administrador de tareas

Aún hay más por aprender

Asincronía en JavaScript

¿Cómo funciona el JavaScript Engine?

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to resolve conflicts with preloaded tasks in Local Storage?

When developing web applications, it is essential to ensure that Local Storage works accurately and efficiently. In this article, we will address some common errors that can arise with preloaded tasks and how to resolve these issues.

What causes the problem of duplicate tasks?

The problem arises mainly due to preloaded tasks that are inserted directly into the HTML code, also known as "hardcoded". When theTaskManager is started, at least one task is inserted by default. This, although useful for didactic or initial sample purposes, can generate conflicts. The main conflict manifests itself when theupdate local storage function scans and saves all li tags present, unintentionally duplicating some tasks.

How does this problem manifest itself?

Duplicate tasks: When editing a task and saving the changes, the application scans all the current li tags and saves them to the local storage.
Unwanted content: These preloaded tasks are also saved, resulting in redundant content that is multiplied with every modification and browser refresh.

How to fix the bug in Local Storage?

The solution requires removing the preloaded tasks from the HTML code to prevent them from being unnecessarily saved to local storage. By following this process, it is ensured that only relevant and dynamic tasks are managed in the application.

Remove hardcoded code: Remove the default tasks from the HTML.

<!-- Remove preloaded tasks --><ul id="task-container"> <!-- Tasks will be dynamically added here --></ul>.

Update Local Storage correctly: Modify logic so that only dynamically generated tasks are scanned and saved to local storage.

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

Test and verify: Make sure after each modification that Local Storage only contains the valid tasks and that no unwanted content has been added.

Practical tips for managing Local Storage

Review code regularly: Perform code audits to avoid hardcoded elements that may generate conflicts.
Dynamic and modular: Keep the code modular so that each part is in charge of a specific functionality that can be adjusted without affecting the whole system.
Continuous testing: Simulate user flow to confirm that tasks behave as expected after adding or modifying content.

By implementing these recommendations, we not only eliminate potential duplicate storage errors, but also improve the overall efficiency and structure of our web applications. Keep exploring and learning to optimize every aspect of your web development!

Contributions 6

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?

Leonardo Salazar Serna

8 months ago

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

Kyb3r Cipher

4 months ago

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: ```js

// code...

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

Carlos Andres Arteaga escobar

4 months ago

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

a month ago

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

Rodrigo Medina

7 months ago

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: `<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>

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

8 months ago

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