Persistencia de Datos con Local Storage en Tareas Web

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

Resumen

¿Cómo administrar la persistencia de datos en una aplicación web?

La persistencia de datos es un componente esencial en cualquier aplicación web moderna. Imagina tener una lista de tareas que evolucionan con el tiempo, pero al refrescar la página, toda esa información desaparece. Eso es exactamente lo que queremos evitar en nuestro proyecto. Aquí explicaremos cómo almacenar y mantener la integridad de los datos en una aplicación, empleando una API web, específicamente el Local Storage.

¿Qué es una API y cómo se utiliza en la web?

Una API (Application Programming Interface) es un intermediario que permite a distintas aplicaciones comunicarse entre sí. Funciona mediante un conjunto de reglas que definen cómo debe realizarse la interacción. Por ejemplo, si deseas integrar información de Facebook en tu aplicación, Facebook proporcionará una API que debes seguir para solicitar información específica. En resumen, las APIs ofrecen un marco para que diversos programas de software interactúen de manera eficiente.

¿Qué es Local Storage?

Local Storage es una API web que ofrece una forma de almacenar datos en el navegador de manera persistente. A diferencia de una base de datos completa, Local Storage permite guardar información clave que es útil para recuperar la interacción del usuario al regresar a la aplicación. Utilizando Local Storage, puedes asegurar que los cambios realizados, como el progreso en una lista de tareas, se mantengan intactos incluso tras refrescar la página.

¿Cómo almacenar datos utilizando Local Storage?

Para trabajar con Local Storage, existen dos métodos esenciales:

SetItem: Este método se usa para guardar valores en Local Storage. Permite agregar información a la misma y se estructura con dos parámetros: una clave (nombre) y un valor.
GetItem: Una vez almacenada la información, este método la recupera para su uso en la aplicación.

Aquí hay un ejemplo de cómo utilizar Local Storage con JavaScript:

// Guardar datos en Local Storage
localStorage.setItem('clave', 'valor');

// Recuperar datos de Local Storage
const valor = localStorage.getItem('clave');

Implementación práctica: Guardar y cargar tareas

Para almacenar una lista de tareas y asegurar que persistan, comenzamos con una función que capte y guarde cada tarea en Local Storage:

function storeTaskInLocalStorage(task) {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.push(task);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

De igual manera, al cargar la aplicación, podemos recuperar todas las tareas y mostrarlas:

function loadTasks() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(task => {
        taskList.appendChild(createTaskElement(task));
    });
}

¿Cómo asegurar la persistencia en la experiencia del usuario?

Para consolidar la persistencia de los datos al interactuar con la aplicación, es relevante ligar el almacenamiento a los eventos correctos. Cuando un usuario añade una nueva tarea, debemos asegurar que esta se guarde inmediatamente en Local Storage y en el DOM:

taskForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const newTask = input.value;
    if (newTask) {
        taskList.appendChild(createTaskElement(newTask));
        storeTaskInLocalStorage(newTask);
        input.value = '';
    }
});

Consideraciones finales

Implementar Local Storage proporciona a la aplicación un método simple y directo para gestionar la persistencia de datos, permitiendo a los usuarios retomar sus actividades sin perder el progreso. Aunque Local Storage es efectiva para aplicaciones de escala pequeña a mediana, para proyectos más grandes, se debe considerar el uso de bases de datos más robustas.

Consejo final: Continúa explorando y aprendiendo a integrar y optimizar sus aplicaciones con herramientas avanzadas para manejar datos y ampliar las funcionalidades de sus proyectos. Tu iniciativa y persistencia te llevarán al éxito en el mundo del desarrollo web. ¡Tienes esto!

Juan Pablo Cardona Duque

student•

Un método muy útil para visualizar (y modificar/eliminar) elementos guardados en el localStorage (o en el sessionStorage y otras APIs) es; en las herramientas de desarrollador, en la ventana "Application/Aplicación".

Ahí tendrás los datos de forma súper accesible e intuitiva. Además, para efectos de desarrollo, puede ser muy rápido encontrar valores cuando hay muchos almacenados.

Santiago Perozo

student•

Muy útil el aporte amigo

Nicolás Mejía Jaramillo

student•

No sabía lo del JSON.stringuify y CHGPT me explicó lo siguiente:

En JavaScript, JSON.stringify() es un método que convierte un objeto o un array en una cadena de texto JSON. Esto es útil cuando necesitas almacenar datos complejos (como objetos o arrays) en un formato que solo acepte texto, como el localStorage o una API.

JSON no es exactamente lo mismo que un OBJETO, aunque son similares y se usan en conjunto.

Diferencias clave entre JSON y un objeto en JavaScript:

Formato de texto vs. estructura de datos:
- JSON es un formato de texto que sigue una estructura específica (comillas dobles para claves y valores) y solo puede representar datos, no funciones o métodos.
- Objeto JavaScript es una estructura de datos que puede contener valores, métodos (funciones dentro del objeto) y otros objetos.

Para usar un JSON como un objeto en JavaScript, usamos JSON.parse(), y para convertir un objeto en JSON usamos JSON.stringify().

Royer Adrian Ojeda Carrion

student•

Buen aporte amigo

Jesus Anguiano Solano

student•

localStorage: Es una Web API que permite almacenar datos en el navegador de forma persistente. La información se guarda en formato clave-valor y persiste si se cierra el navegador. No es una base de datos, sino un almacenamiento simple para cadenas de texto.
Funciones principales de localStorage:
- setItem(key, value): Guarda un valor asociado a una clave. El valor debe de ser una cadena de texto, por lo que se usa JSON.stringify() para convertir objetos o arrays a formato JSON.
- getItem(key): Recupera el valor almacenado con la clave proporcionada. El valor recuperado es una cadena, por lo que se usa JSON.parse() para convertirlo a un objeto o array.

Fidel Evangelista

student•

que diferencia hay entre usar cookies y localstorage? que ventajas y desventajas tiene cada uno?

Leiber Bertel

student•

Any Omaña

student•

Esta clase es una total locura, jamás hubiese imaginado llegar hasta aquí y almacenar contenido de un to-do list en el local storage del navegador:

Les dejo el link de acceso a mi código por si de pronto están algo perdidos, intenté comentarlo con cada detalle lo más preciso posible:

https://github.com/iamanyyeei/ToDo-List---Manipulacion-del-DOM

Luis Eduardo Payano Villar

student•

Realmente con cada tema mi mente sigue evolucionando y sigo aportando valor a mi trabajo, definitivamente agradezco tanto el hecho de poder agregar valor con el contenido de platzi

Alejandro Torres

student•

¿Qué diferencia hay entre usar .append y .appendChild ? He probado de las dos formas y se cargan los datos igualmente.

Luis Hernando Barreto Carvajal

student•

Entiendo que con appendChild solo se puede agrega un elemento a la vez, mientras que con append, más de uno. De otra parte, appendChild devuelve valor (el nodo creado), mientras que append no.

Moises Hernandez

student•

En el minuto 7:35 el profesor dice que el método de localStorage setItem recibe dos parámetros el texto que vayamos agregar y la tarea esto es un pequeño error que se puede mal interpretar. La forma correcta de decirlo seria: El método setItem de localstorage recibe dos parámetros la clave y el valor.

Daniel Zavala Taipe

student•

Que se saltaran la clase donde explican cómo se crean las tareas me desconectó totalmente del curso.

Cristian Rodriguez Morales

student•

Los reto llevarlo a otro nivel y hacer un drag and drop , dejas 3 columnas, uno de tareas nuevas, en progreso y finalizadas, así puedes ir arrastrando tareas en a cada estado persistiendo los datos

Enrique Barrera

student•

Hola, gracias por el curso, que tipo de objetos puedo almacenar en el localStorage y bajo que circunstancias se perdería esa información?

Francisco Serrato Jiménez

student•

Checa este Link:

https://platzi.com/blog/local-storage-html5/

👍

Carlos Hernandez

student•

Diego Restrepo-Leal

student•

Me resulta muy interesante el localStorage.

Edwar Macias

student•

Me gusta mucho como se esta manejando la ruta de Js, felicitaciones al equipo de platzi por esa refactorización del orden de los cursos.

Victor R Vele

student•

Buenísimo profe me quito el sombrero es especial gracias pero tengo mucho que aprender

Antonio Mesa Casares

student•

Aquí os dejo el código de mi aplicación con lo realizado hasta ahora. Es distinto a como lo tiene el profesor ya que he intentado ir realizando gran parte por mi cuenta y cuando tenía alguna duda o no sabía como continuar tomaba como referencia y veía los vídeos. Espero os sirva mi aporte. Os paso el código de cada uno de los archivos HTML, CSS y JS.

Archivo HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de tareas</title>
    <link rel="stylesheet" href="style.css">
    <script src="app.js" defer></script>
</head>
<body>
    <nav id="cambiar-tema">
        <button id="btn-cambiar-tema" class="btn-cambiar-tema">Cambiar Tema</button>
    </nav>
    <div class="contenedor-principal">

        <h2>Lista de tareas</h2>

        <form id="formularioTareas">
            <input id="inputTarea" type="text" placeholder="Escribe la tarea">
            <button id="enviar" class="btnEnviar">Enviar</button>
        </form>

        <div id="contenedor-tareas"  class="contenedor-tareas">
            <ul id="lista-tareas">
                <li>
                    Tarea ejemplo
                    <span class="btnBorrar">❌</span>
                    <span class="btnEditar">🖋️</span>
                </li>
            </ul>
        </div>

    </div>

    
</body>
</html>
```\*Archivo CSS

```css
body {
    margin: 0;
    padding: 0;
    background: lightgrey;
    font-size: 24px;
    font-family: monospace;
}

nav {
    padding: 10px;
    margin-bottom: 20px;
}

h1{
    font-size: 64px;
}

form {
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
}

input {
    width: 65%;
    margin-right: 20px;
    padding: 20px;
    font-size: 24px;
}

button {
    width: 20%;
    padding: 20px;
    font-size: 24px;
    border: 0px;
    border-radius: 5%;
    color: rgb(10, 10, 10);
}

button:hover {
    background: lightslategray;
    cursor: pointer;
    
}

ul {
    background: lightslategray;
    color: lightgreen;
    list-style: none;
}

li {
    padding: 10px;
}
span {
    margin-left: 10px;
}

span:hover{
    cursor: pointer;
}

.contenedor-principal {
    width: 50%;
    background: white;
    margin: 0 auto;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 10px 10px 5px 2px lightslategrey;
}

.btnEnviar {
    width: 25%;
}
```*Archivo Javascript*

```js
//Vamos a crear una app de lista de tareas con persistencia de datos.
//El funcionamiento lo vamos a programar por funciones
// 1.- Función para escuchar el evento submit en el formulario
// 2.- Función para agregar la tarea a la lista de tareas
// 3.- Función para agregar los botones a continuación de la tarea. Botones eliminar y editar (creados con span)
// 4._ función para escuchar el evento click en la tarea y comprobar si queremos borrar o editar.
// Para el punto 4 poder comprobar si hemos dado click en borrar o editar usaremos delegación de eventos
// Visto en unos temas anteriores.

//Traemos el formulario completo para generarle un evento submit
const formularioTareas = document.getElementById("formularioTareas");

//Traemos el contenedor lista-tareas para agregar las tareas que vayamos añadiendo en el input
const listaTareas = document.getElementById("lista-tareas");

//Llamamos a la función leer tareas del localStorage
cargarTareas();

//Listener al formulario para cuando agreguemos una tarea.
formularioTareas.addEventListener("submit", (event) => { //Le pasamos el evento mismo para trabajar con el
    event.preventDefault(); //Prevenimos el refresco de pantalla al dar en enviar. Es el efecto por defecto de un formulario.

    //Tomamos los datos del input
    const inputTarea = document.getElementById("inputTarea");
    const tarea = inputTarea.value;
    if(tarea){
        addTarea(tarea);
        inputTarea.value = ""; //Esto es para quitar el texto del input una vez enviado
    }
    
});

//Función agregar tarea a la lista de tareas.

function addTarea(tarea) {
    
    //Creamos un elemento li para agregar a la lista de tareas
    const nuevaTarea = document.createElement("li");

    //Llamamos a la función para crear los botones editas y borrar
    const {btnBorrar, btnEditar} = editRemoveButtons();

    //Agregamos la nueva tarea a la lista.
    nuevaTarea.textContent = tarea
    
    nuevaTarea.append(btnBorrar);       
    nuevaTarea.append(btnEditar);
    listaTareas.append(nuevaTarea);
    guardarTareaLocalStorage(tarea);    
}

//Función para agregar los botones eliminar y editar

function editRemoveButtons(){
    //Tomamos los elementos span para clonarlos. Después esta función habrá que cambiarla ya que habrá que crear
    //los elementos desde cero teniendo en cuenta que no existirán inicialmente la tarea de ejemplo.

    /* Para crear los botones span con los símbolos X y lápiz podemos hacerlo seguramente de dos maneras, 
    creando la etiqueta span y mediante una clase añadirle el símbolo, o creando la etiqueta span y añadirle como
    textContent los símbolos. Probar de las dos maneras y devolver los nodos creados sin clonar.*/

    /* Para después realizar el listener de los botones vamos a necesitar que tengan una clase btnBorrar y btnEditar,
    nos aseguramos de indicarlo en el html */

    const [spanRemove, spanEdit] = listaTareas.querySelectorAll("span");
    const btnBorrar = spanRemove.cloneNode(true);
    const btnEditar = spanEdit.cloneNode(true);    
    return {btnBorrar, btnEditar};
}

//Vamos a usar la delegación de eventos para comprobar si queremos editar o borrar la tarea.

listaTareas.addEventListener("click", (event) => {
    if (event.target.classList.contains("btnBorrar")){
        eliminarTarea(event.target.parentElement);
    } else if (event.target.classList.contains("btnEditar")){
        editarTarea(event.target.parentElement);
    }
    //Otra forma de hacer la comparación la hice así:
    //(event.target.classList == "btnBorrar") y también funcionaba
});                         

//Creamos las funciones del botón editar y del  botón borrar por separado

//Función que se ejecutará al pulsar el botón borrar

function eliminarTarea(tareaItem){
    
    if (confirm("¿Estás segur@ de querer borrar la tarea?")){ //confirm es como el alert pero quedando pendiente de recibir una respuesta si/no
        tareaItem.remove();
    }
}

//Función para editar la tarea

function editarTarea(tareaItem){
    //prompt es parecido a confirm pero que nos permite escribir algo para enviar y confirmar
    const tareaEditada = prompt("Edita la tarea: ", tareaItem.firstChild.textContent);
    //Tenemos que confirmar que tareaEditada no es null para modificar con el texto enviado dicha tarea
    if (tareaEditada != null){
        tareaItem.firstChild.textContent = tareaEditada;
    }
}

/* Persistencia de datos */

//Las funciones que vienen a continuación harán uso de la wepAPI localStorage para guardar la información
//de las tareas que añadamos, editemos y borremos.

function guardarTareaLocalStorage(tarea){
    //Creamos una constante para guardar las tareas que haya en localStorage
    //con JSON.parse convertimos el objeto en un array
    const tareas = JSON.parse(localStorage.getItem("tareas") || "[]");
    tareas.push(tarea); //añadimos la tarea al array tareas.
    //Guardamos en localStorage la nueva tarea con setItem pasándole dos argumentos,
    //primero el nombre del objeto (key) y luego el array pasado a string. 
    localStorage.setItem("tareas", JSON.stringify(tareas));
}

//Función para cargar las tareas guardas en el localStorage

function cargarTareas(){
    //Leemos el localStorage para comprobar si hay tareas y las convertimos en un array
    //si no hay tareas creamos el array vacío.

    const tareas = JSON.parse(localStorage.getItem("tareas") || "[]");
    //console.log(tareas);
    //Recorremos el array tareas y las pasamos al HTML
    tareas.forEach((tarea) => {
        //console.log(tarea);
        addTarea(tarea);
    });
}

Antonio Mesa Casares

student•

Perdonad si no se ve bien, he seguido los pasos de poner por bloques de código y señalar el lenguaje de programación, pero parece ser que no ha funcionado bien.

Daniel Andres Rojas Paredes

student•

  const tasks=JSON.parse(localStorage.getItem("tasks"||"[]"))

```Hola estoy depurando mi codigo, como podran leer  la linea de arriba tiene un error comparado con lo que escribe el profe, sin embargo el editor nunca me aviso de esto al debuggear, lo encontre usando una ia para encontrar donde podia estar el error que me lleva alsiguiente comportamiento( y que al parecer no es este) cuando llamo la funcion  loadTasks my programa deja de agregar las tareas y siempre tiene un comportamiento como si  recargara la pagina.  de echo acabo de darme cuenta que el problema era que el autocomplete de vscode me escribio tasks.Array.forEach en vez de task.forEach. me gustaria saber porque ese error puede tener un comportamiento como si la pagina se recargara cada vez, en la consola del navegador  me salia :cannot  read properties of undefine haciendo referencia a este error. tambien me gustaria saber  el porque de la linea de arriba. si alguien sabe, yo  igual seguire buscando por mi cuenta&#x20;

Beto Majalca

student•

Almacenamiento y carga de datos en localStorage():

Para utilizar este método es necesario la intervención de una web API, el window.localStorage, en él se pueden almacenar datos en el propio navegador, no importa si se cierra la ventana, pestaña o incluso si se reinicia, los datos ahí van a estar.

<u>¿Qué son las API?</u>

Las Interfaces de Programación de Aplicaciones (API), son los intermediarios que nos ayudan a comunicarnos y nos dan funcionalidades como métodos propios para interactuar con diferentes recursos, en este caso el localStorage pertenece al objeto window, que este a su vez es una API de almacenamiento del navegador al renderizarse.