Ejercicio de JavaScript: lista de tareas con localStorage

Este ejercicio de JavaScript de lista de tareas con localStorage te permite practicar cambios en una lista y persistencia en el navegador.

Enunciado

Añade tareas desde un formulario, permite retirarlas y recupera los datos al recargar. Rechaza entradas que solo contengan espacios.

Solución comentada

Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.

<form id="tareas-form">
  <label for="tarea">Nueva tarea</label>
  <input id="tarea" maxlength="100" required>
  <button>Añadir</button>
</form>
<p id="tareas-estado" role="status"></p>
<ul id="tareas"></ul>
<script>
  const clave = "mcp:ejercicio-tareas";
  const campo = document.querySelector("#tarea");
  const lista = document.querySelector("#tareas");
  const estado = document.querySelector("#tareas-estado");
  let tareas = [];
  try {
    const datos = JSON.parse(localStorage.getItem(clave) || "[]");
    if (Array.isArray(datos)) tareas = datos.filter(t => typeof t === "string");
  } catch { estado.textContent = "No se pudieron leer las tareas."; }
  function guardar() {
    try {
      localStorage.setItem(clave, JSON.stringify(tareas));
      estado.textContent = "Lista guardada.";
    } catch { estado.textContent = "Los cambios solo duran en esta página."; }
  }
  function mostrar() {
    lista.replaceChildren();
    tareas.forEach((texto, indice) => {
      const li = document.createElement("li");
      const borrar = document.createElement("button");
      borrar.type = "button";
      borrar.textContent = "Borrar " + texto;
      borrar.addEventListener("click", () => {
        tareas.splice(indice, 1);
        guardar();
        mostrar();
        campo.focus();
      });
      li.append(texto + " ", borrar);
      lista.append(li);
    });
  }
  document.querySelector("#tareas-form").addEventListener("submit", evento => {
    evento.preventDefault();
    const texto = campo.value.trim();
    if (!texto) {
      estado.textContent = "Escribe una tarea.";
      return;
    }
    tareas.push(texto);
    guardar();
    mostrar();
    campo.value = "";
    campo.focus();
  });
  mostrar();
</script>

JSON permite guardar el array como texto. La lista se reconstruye tras cada cambio, por lo que el índice asociado a cada botón corresponde al estado visible. Usa un servidor local para probar la persistencia de manera consistente.

Cómo comprobar tu solución

Añade dos tareas y recarga la página.
Borra la primera y confirma que la segunda se conserva al recargar.
Prueba una entrada que solo tenga espacios.

Reto adicional

Convierte cada tarea en un objeto con texto y estado completado. Usa otra clave de almacenamiento o adapta la lectura para admitir los datos guardados por el ejercicio anterior.

Repasa los conceptos en el tutorial de MasterCodePro.