Almacenamiento y carga de datos en localStorage

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?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿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!

Aportes 11

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan Pablo Cardona Duque

hace 8 meses

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.

Nicolás Mejía Jaramillo

hace 6 meses

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: 1. **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()`.

Jesus Anguiano Solano

hace 7 meses

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

hace 8 meses

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

Luis Eduardo Payano Villar

hace 7 meses

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

Diego Restrepo-Leal

hace 4 meses

Me resulta muy interesante el localStorage.

Edwar David Macias Lopez

hace 6 meses

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

hace 8 meses

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

Antonio Mesa Casares

hace 8 meses

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

Lista de tareas

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

Tarea ejemplo ❌ 🖋️

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

Daniel Andres Rojas Paredes

hace 8 meses

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

Beto Majalca

hace 8 meses

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.