Chuck's Academy

Web Storage API en HTML5

Inicio / Tema / Web Storage API en HTML5 / Comprendiendo `localStorage`

Comprendiendo `localStorage`

En este capítulo, exploraremos localStorage, una de las dos opciones de almacenamiento en HTML diseñadas para guardar datos en el navegador del usuario de manera persistente. localStorage permite almacenar datos en el cliente sin que estos se envíen al servidor, lo cual es ideal para guardar configuraciones, preferencias y otra información que el usuario necesita conservar entre sesiones de navegación.

¿Qué es localStorage?

localStorage es una API de almacenamiento en el navegador que permite a las aplicaciones web almacenar datos en forma de pares clave-valor. Estos datos permanecen en el navegador incluso después de cerrar el navegador o apagar el dispositivo, hasta que se eliminen manualmente o mediante una acción programada.

Características Principales de localStorage

  • Persistencia a Largo Plazo: A diferencia de sessionStorage, los datos en localStorage no se eliminan al cerrar la ventana o pestaña del navegador. Permanecen en el navegador hasta que sean eliminados manualmente por el usuario o mediante código.
  • Alcance de Dominio: Los datos guardados en localStorage solo son accesibles dentro del mismo dominio (misma combinación de protocolo y nombre de dominio) que los creó. Esto significa que no se puede acceder a los datos de un dominio diferente, lo cual mejora la seguridad.
  • Capacidad de Almacenamiento: localStorage permite almacenar hasta aproximadamente 5-10 MB, dependiendo del navegador, lo cual es significativamente mayor que el límite de 4 KB de las cookies.

Métodos Básicos de localStorage

La API de localStorage ofrece varios métodos para manipular datos de manera sencilla:

  1. setItem(key, value): Guarda un par clave-valor en localStorage.
  2. getItem(key): Recupera el valor almacenado asociado a una clave específica.
  3. removeItem(key): Elimina el par clave-valor de localStorage.
  4. clear(): Elimina todos los datos almacenados en localStorage.

Ejemplos de Uso de los Métodos Básicos

Guardar Datos en localStorage

javascript
"En este ejemplo, guardamos el valor dark con la clave theme en localStorage. Esto es útil para almacenar preferencias de usuario, como un tema oscuro o claro."

Recuperar Datos de localStorage

javascript
"Aquí obtenemos el valor almacenado con la clave theme usando getItem y lo mostramos en consola. Si la clave no existe, el método devolverá null."

Eliminar Datos de localStorage

javascript
"Este código elimina el valor asociado a la clave theme en localStorage. Esto es útil para borrar preferencias de usuario específicas."

Limpiar Todo el Contenido de localStorage

javascript
"Este método clear elimina todos los datos almacenados en localStorage. Úsalo con precaución, ya que removerá todas las claves y valores guardados."

Usando JSON con localStorage

Dado que localStorage solo almacena datos como cadenas de texto, es común utilizar JSON para almacenar objetos complejos. Esto se logra convirtiendo los objetos en cadenas JSON con JSON.stringify() y recuperándolos luego con JSON.parse().

Ejemplo de Almacenamiento de un Objeto

javascript
"Aquí creamos un objeto de preferencias con propiedades como theme y fontSize, lo convertimos a JSON usando stringify y lo almacenamos en localStorage."

Recuperación de un Objeto desde localStorage

javascript
"Este ejemplo muestra cómo recuperar el objeto de preferencias de localStorage. Usamos JSON.parse para convertirlo de nuevo en un objeto de JavaScript, permitiéndonos acceder a sus propiedades como theme y fontSize."

Ejemplos Prácticos de Uso de localStorage

Guardar Preferencias de Usuario

Un uso común de localStorage es almacenar las preferencias del usuario, como el tema de la página o el idioma seleccionado. Esto permite que el sitio recuerde la configuración del usuario entre visitas.

javascript
"En este ejemplo, usamos una función para establecer el tema de la página y almacenarlo en localStorage. Luego, al cargar la página, verificamos si el tema ya está guardado y lo aplicamos automáticamente si existe."

Guardar Datos de Formularios

localStorage también puede ser útil para almacenar datos de formularios, de modo que los usuarios no pierdan la información en caso de recargar la página accidentalmente.

javascript
"Este código guarda el valor de un campo de texto en localStorage cada vez que cambia. Al recargar la página, verificamos si hay un valor guardado y lo restauramos en el campo de texto."

Buenas Prácticas y Limitaciones de localStorage

Aunque localStorage es extremadamente útil, también tiene limitaciones y consideraciones importantes:

  • Evitar el Almacenamiento de Datos Sensibles: Debido a su accesibilidad en el lado del cliente, localStorage no es adecuado para datos sensibles como contraseñas o tokens de acceso. Esto es especialmente importante porque el almacenamiento es vulnerable a ataques de Cross-Site Scripting (XSS).
  • Usar JSON para Datos Complejos: Como localStorage solo almacena datos en formato de cadenas de texto, es conveniente usar JSON para almacenar y recuperar datos complejos como objetos o arreglos.
  • Capacidad Limitada: Aunque el límite de localStorage es mayor que el de las cookies, sigue siendo relativamente pequeño en comparación con el almacenamiento del servidor. Se recomienda no usar localStorage para grandes cantidades de datos.

Conclusión

En este capítulo, hemos explorado el funcionamiento y uso de localStorage para almacenar datos de manera persistente en el navegador del usuario. Vimos cómo usar los métodos principales de localStorage y cómo almacenar y recuperar datos complejos utilizando JSON. En el próximo capítulo, aprenderemos sobre sessionStorage, otra opción de almacenamiento en HTML que permite guardar datos temporales que solo persisten durante la sesión de navegación.

Volver al capítulo anterior
Marcar como leìdo y continuar
Pregúntame lo que sea