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

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

Resumen

¿Cómo almacenar tareas en `localStorage` usando JavaScript?

El manejo eficiente de datos es crucial en cualquier aplicación moderna. En este caso, exploraremos cómo almacenar y gestionar tareas en el localStorage del navegador usando JavaScript, permitiendo que las modificaciones persistan incluso al refrescar la página. ¿Listo para aprender cómo mantener el estado de tus tareas al usar JavaScript? Vamos a verlo paso a paso.

¿Cómo asegurarse de que las tareas persistan después de actualizar la página?

Comenzamos guardando nuestras tareas en el localStorage. Esto asegura que incluso cuando actualices la página, se mantenga el registro de las tareas ya creadas. Puedes verificar el estado almacenado de las tareas usando el navegador:

Accediendo al localStorage: Puedes ver las tareas guardadas inspeccionando el localStorage a través de la consola de desarrollador.
Estructura del almacenamiento: Las tareas se almacenan en un array bajo una clave específica, como tasks, para su fácil acceso.
Retroalimentación Visual: A pesar de poder borrar y editar tareas desde la interfaz de usuario, sin actualizar el localStorage, estos cambios no son permanentes. Necesitamos abordar esta actualización para mantener la memoria a través de los refrescos de página.

¿Cómo implementar la actualización del `localStorage` tras editar o borrar tareas?

Para que los cambios sean permanentes al actualizar, necesitamos implementar funciones que reflejen estas modificaciones en el localStorage. Aquí está cómo hacerlo:

Función de actualización de `localStorage`

La función updateLocalStorage se llama cada vez que una tarea se edita o elimina y no requiere parámetros ya que actúa sobre el estado actual de las tareas.

function updateLocalStorage() {
    const taskElements = document.querySelectorAll('#task-list li');
    const tasksArray = Array.from(taskElements).map(el => el.firstChild.textContent);
    localStorage.setItem('tasks', JSON.stringify(tasksArray));
}

Recuperar Contenido Actualizado: Usamos querySelectorAll para obtener todos los elementos <li> del contenedor de tareas, convirtiéndolos a un array para manipulación.
Mapeo y Serialización: Luego, mapeamos estos nodos para recuperar su contenido de texto, logrando un array de tareas actualizadas.
Almacenamiento: Finalmente, el array se serializa a un string JSON, almacenándose en el localStorage bajo la clave tasks.

Automatización con Editar

Integra la función updateLocalStorage dentro del flujo de edición de tareas para asegurar que cada cambio se refleje en el localStorage.

function editTask(taskIndex, newContent) {
    // Supongamos que existe la funcionalidad para realizar los cambios en la UI
    document.querySelectorAll('#task-list li')[taskIndex].firstChild.textContent = newContent;
    updateLocalStorage();
}

¿Por qué es importante convertir NodeLists en arrays?

Al trabajar con un NodeList (la estructura devuelta por querySelectorAll), convertirlo a un array es crucial para aprovechar los métodos de array, como map, que no están disponibles en un NodeList.

Flexibilidad de Manipulación: Utilizar Array.from permite convertir rápidamente un NodeList en un array, brindando acceso a métodos como map, filter y reduce.
Facilidad de Iteración y Mapeo: Una vez en formato de array, iterar y mapear para transformar datos se vuelve sencillo y efectivo.

Consideraciones finales

Utilizar correctamente localStorage, junto con la conversión y manipulación de NodeList, permite gestionar el estado de manera persistente en aplicaciones web. Esto garantiza que las operaciones en la interfaz de usuario, como agregar, editar y eliminar tareas, se reflejen automáticamente en el estado almacenado, llevando la experiencia del usuario a un nuevo nivel de fiabilidad y coherencia. No subestimes la importancia de la capacidad de almacenamiento clave-valor que el localStorage ofrece, ¡es un recurso valioso en el desarrollo web moderno!

¡Continúa explorando y perfeccionando tus habilidades de programación! Cada ajuste y nueva función integrada es un paso más hacia la construcción de aplicaciones más robustas y completas.

Natalia Gallego Heras

student•

Con el console.log(tasks) del principio, incluso una vez ya hacemos Array.from(taskList.querySelectorAll('li')) [pero antes del map], podemos ver en consola la gran diferencia que hay entre innerHTML e innerText.

👀 Esto es interesante porque unas veces necesitaremos recuperar toda la información HTML (<span class= "...> ) y otras veces nos bastará con el texto(❌):

Kyb3r Cipher

student•

He notado que al eliminar, agregar y actualizar se vuelve a hacer set a el localStorage esto no afecta en el performace en projectos grandes? no hay methods que puedan actualizarlo?. He notado que existen algunos y intento aprender a usarlos como .clear que limpia el localStorage alguien sabe algo respecto a esto?

Jaime Manuel Cutipa Calderón

student•

Para tener en cuenta firstChild retorna el contenido del primer nodo

En este caso seria solo el texto.

Posterior en createTaskElement(), se le añade los iconos.

Franco Moscetta

student•

Cuando elimino una tarea y refresco la página, no me la elimina, me vuelve a aparecer la tarea ¿Me perdí de algo o no lo explica?

// Clase 1 (20): Añadir tareas desde un formulario
const taskForm = document.getElementById("task-form");

const taskList = document.getElementById("task-list");

loadTasks()

taskForm.addEventListener("submit", (event) => {
  event.preventDefault();

  const taskInput = document.getElementById("task-input");

  const task = taskInput.value;
  console.log(task);

  if (task) {
    taskList.append(createTaskElement(task));
    storeTaskInLocalStorage(task);
    taskInput.value = "";
  }
});

function createTaskElement(task) {
  const li = document.createElement("li");
  li.textContent = task;
  li.append(createButton("❌", "delete-btn"), createButton("✏️", "edit-btn"));
  return li;
}

function createButton(text, className) {
  const btn = document.createElement("span");
  btn.textContent = text;
  btn.className = className;
  return btn;
}

// Clase 2 (21): Eliminar y editar tareas del DOM
taskList.addEventListener("click", (event) => {
  if (event.target.classList.contains("delete-btn")) {
    deleteTask(event.target.parentElement);
  } else if (event.target.classList.contains("edit-btn")) {
    editTask(event.target.parentElement);
  }
});

function deleteTask(taskItem) {
  if (confirm("Estás seguro de borrar este elemento?")) {
    taskItem.remove()
  }
}

function editTask(taskItem) {
  const newTask = prompt("Edita la tarea:", taskItem.firstChild.textContent);
  if (newTask !== null) {
    taskItem.firstChild.textContent = newTask;
    updateLocalStorage()
  }
}

// Clase 3 (22): Almacenamiento y carga de datos en localStorage
function storeTaskInLocalStorage(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) => {
    taskList.appendChild(createTaskElement(task));
  });
}

// Clase 4 (23): Eliminar y editar tareas del almacenamiento local
function updateLocalStorage() {
  const tasks = Array.from(taskList.querySelectorAll("li")).map( (li) => li.firstChild.textContent);
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

Karen Benites Segura

student•

en la funcion deletetask tambien debe ir el updatelocal storage para que se actualice

Calvin Rafael Bobadilla Fernandez

student•

Local storage diria que es la forma mas usada por principiantes para guardar "datos en la nube", obviamente no porque los guarda asi, si no que antes creia que para paginas donde se deberian guardar configuraciones, debia conectarme a un servidor y traer esa config, pero con localStorage eso es un peso menos de encima (por ahora)

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

¿Cómo almacenar tareas en localStorage usando JavaScript?

¿Cómo asegurarse de que las tareas persistan después de actualizar la página?

¿Cómo implementar la actualización del localStorage tras editar o borrar tareas?

Función de actualización de localStorage

Automatización con Editar

¿Por qué es importante convertir NodeLists en arrays?

Consideraciones finales

¿Cómo almacenar tareas en `localStorage` usando JavaScript?

¿Cómo implementar la actualización del `localStorage` tras editar o borrar tareas?

Función de actualización de `localStorage`