Almacenamiento y recuperación de datos

Introducción

En este Laboratorio, acompañamos a Alex, un desarrollador web decidido en una empresa tecnológica en auge, que ahora se aventura en el campo de la persistencia de datos. Después de crear con éxito un mecanismo para rastrear y mostrar registros financieros en el seguidor de finanzas personales, el siguiente desafío es garantizar que estos registros persistan a través de las sesiones del navegador. El objetivo es permitir que los usuarios vuelvan a la aplicación y encuentren todos los datos que ingresaron previamente intactos, mejorando la usabilidad y la satisfacción del usuario de la aplicación. Esta tarea introduce a Alex al concepto de almacenamiento web, específicamente aprovechando la API localStorage para guardar y recuperar el estado de la aplicación.

En este Laboratorio, aprenderá a usar localStorage para almacenar datos localmente en el navegador del usuario, lo que permite la persistencia de datos en aplicaciones web.

Puntos de conocimiento:

• Uso de localStorage
• Serialización y deserialización de JSON (JSON.stringify, JSON.parse)

Skills Graph

LocalStorage

localStorage ofrece un mecanismo para almacenar datos de sesión en el lado del cliente, con límites de almacenamiento generalmente de alrededor de 5MB. A diferencia del almacenamiento de sesión (sessionStorage), los datos en localStorage no desaparecen cuando finaliza la sesión.

Almacenar datos

El método setItem() te permite almacenar datos en localStorage. Este método toma dos parámetros: una clave y un valor.

Por ejemplo:

localStorage.setItem("username", "Alice");

Recuperar datos

El método getItem() se utiliza para leer datos de localStorage. Este método toma un parámetro: la clave.

Por ejemplo:

localStorage.setItem("username", "Alice");
let username = localStorage.getItem("username");
console.log(username); // Muestra: Alice

Guardar registros en LocalStorage

En este paso, trabajarás con Alex para implementar la funcionalidad que guarda la matriz de registros financieros en localStorage cada vez que se agrega un nuevo registro. Esto garantiza que los datos del usuario se almacenen localmente en su dispositivo, estando disponibles incluso después de que se cierre o se actualice el navegador.

Al principio de script.js, antes de definir la función addFinancialRecord, agrega el siguiente código para cargar los registros guardados de localStorage e inicializar la matriz financialRecords:

Modifica script.js para cargar registros de localStorage:

document.addEventListener("DOMContentLoaded", function () {
  let records = JSON.parse(localStorage.getItem("records")) || [];
});

• El método estático JSON.parse() analiza una cadena JSON, construyendo el valor o objeto de JavaScript descrito por la cadena. Se puede proporcionar una función reviver opcional para realizar una transformación en el objeto resultante antes de que se devuelva.

Implementar la persistencia de registros

Agrega la lógica para almacenar el registro en localStorage en la función addRecord:

document.addEventListener("DOMContentLoaded", function () {
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
  };

  const addRecord = (description, amount, type) => {
    records.push({ description, amount, type });
    saveRecords();
  };
});

Ahora, cada vez que se agrega un nuevo registro financiero, se guardará en localStorage, lo que garantiza la persistencia de datos.

A continuación, necesitamos implementar la función de eliminación de contabilidad. Antes de escribir la función de eliminación, necesitamos aprender un nuevo método de operación de arrays.

Método splice

El método splice() puede tomar tres parámetros: la posición de inicio, el número de elementos a eliminar y los nuevos elementos a agregar.

Sintaxis:

array.splice(start, deleteCount, item1, item2,...)

• start: El índice en el que se comienza a cambiar el array.
• deleteCount: El número de elementos a eliminar. Si no se deben eliminar elementos, este debe ser 0.
• item1, item2,...: Nuevos elementos a agregar al array.

Eliminando elementos

Para eliminar elementos de un array, establece el parámetro deleteCount sin necesidad de agregar nuevos elementos.

let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2); // Elimina 2 elementos comenzando desde el índice 1
console.log(fruits); // Muestra: ['Apple', 'Date']

Agregando elementos

splice() también puede agregar elementos en una posición específica del array sin eliminar ningún elemento. Establece deleteCount en 0 y especifica los elementos a agregar.

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(2, 0, "Date"); // Agrega 'Date' en el índice 2
console.log(fruits); // Muestra: ['Apple', 'Banana', 'Date', 'Cherry']

Reemplazando elementos

Al establecer deleteCount y agregando nuevos elementos, splice() puede tanto eliminar como agregar elementos, reemplazándolos efectivamente.

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Date"); // Reemplaza 1 elemento en el índice 1 con 'Date'
console.log(fruits); // Muestra: ['Apple', 'Date', 'Cherry']

Agregar la capacidad de eliminar registros

Agregar la capacidad de eliminar registros.

Escribe el siguiente código en el archivo script.js:

document.addEventListener("DOMContentLoaded", function () {
  window.deleteRecord = (index) => {
    records.splice(index, 1);
    saveRecords();
  };
});

Resumen

En este laboratorio, tú y Alex enfrentaste el reto de la persistencia de datos en la aplicación de seguimiento de finanzas personales. Al aprender a usar la API localStorage, has habilitado que la aplicación guarde y recupere registros financieros a través de sesiones del navegador, mejorando significativamente la experiencia del usuario. Esta introducción al almacenamiento web abre nuevas posibilidades para crear aplicaciones web más complejas y amigables para el usuario.

A través de la práctica práctica, has visto cómo los datos se pueden serializar a un formato de cadena usando JSON.stringify para el almacenamiento y luego deserializarse de nuevo en objetos de JavaScript usando JSON.parse para la recuperación. Este proceso es crucial para el manejo del estado de la aplicación en el desarrollo web del lado del cliente, formando una habilidad fundamental que te ayudará en tus futuros proyectos de desarrollo web.