localStorage y sessionStorage

• localStorage y sessionStorage son mecanismos de almacenamiento web que permiten a los navegadores guardar información localmente en el dispositivo del usuario.

Propiedades Comunes

• Ambos (localStorage y sessionStorage) almacenan datos como pares clave-valor.
• Solo pueden guardar strings; otros tipos de datos deben ser serializados (convertidos a string) antes de almacenarlos y deserializados al recuperarlos.
• Están limitados por el dominio, por lo que solo se puede acceder a los datos guardados por scripts que se ejecutan en el mismo dominio que los guardó.
• Ofrecen métodos similares para manipular los datos: setItem(), getItem(), removeItem(), clear(), y key().
• No están disponibles para el servidor; la información se almacena solo en el lado del cliente.

localStorage

• Los datos persisten entre sesiones del navegador, estando disponibles incluso después de cerrar y volver a abrir el navegador.
• Tiene una capacidad de almacenamiento mayor que las cookies.
• La información guardada no se envía automáticamente con cada petición HTTP al servidor, ahorrando ancho de banda.
• Es útil para almacenar configuraciones de usuario, datos de aplicaciones offline, o información que no cambia frecuentemente.
• Ejemplo:
  • Guardar: localStorage.setItem('tema', 'oscuro');
  • Recuperar: let tema = localStorage.getItem('tema');

sessionStorage

• Los datos se almacenan solo durante la duración de la sesión del navegador, borrándose al cerrar la pestaña o ventana del navegador.
• Es similar a localStorage en términos de API (métodos para manipular datos), pero con una vida útil más corta.
• Es útil para almacenar información temporal relacionada con la sesión del usuario, como datos de un carrito de compras antes de finalizar la compra, o el estado de la sesión actual.
• Ejemplo:
  • Guardar: sessionStorage.setItem('carrito', JSON.stringify(productosCarrito));
  • Recuperar: let productosCarrito = JSON.parse(sessionStorage.getItem('carrito'));

Métodos Principales

• setItem(clave, valor): Añade o actualiza un par clave-valor en el almacenamiento.
• getItem(clave): Recupera el valor asociado a la clave especificada, retornando null si la clave no existe.
• removeItem(clave): Elimina el par clave-valor asociado a la clave especificada.
• clear(): Elimina todos los pares clave-valor del almacenamiento.
• key(índice): Retorna el nombre de la clave en la posición del índice especificado.

Serialización y Deserialización

• Dado que ambos almacenamientos solo admiten strings, es necesario serializar objetos JavaScript a strings antes de guardarlos y deserializarlos al recuperarlos.
• JSON.stringify(objeto): Convierte un objeto JavaScript a un string JSON.
• JSON.parse(string): Convierte un string JSON a un objeto JavaScript.

Manejo de Errores

• Almacenar datos en localStorage o sessionStorage puede fallar si se excede la cuota de almacenamiento permitida por el navegador.
• Es recomendable implementar mecanismos de manejo de errores (try-catch) para capturar excepciones QuotaExceededError y actuar en consecuencia (por ejemplo, limpiar datos innecesarios o informar al usuario).

Seguridad

• No guardar información sensible (como contraseñas o información personal confidencial) en localStorage o sessionStorage, ya que son accesibles por scripts del lado del cliente y pueden ser vulnerables a ataques XSS (Cross-Site Scripting).
• Considerar el uso de medidas de seguridad adicionales, como el cifrado, para proteger información sensible si es absolutamente necesario almacenarla en el lado del cliente.

Casos de Uso Comunes para localStorage

• Guardar las preferencias del usuario, como el tema de la aplicación (claro/oscuro), el idioma, la configuración de la fuente, etc.
• Almacenar datos de formularios para rellenarlos automáticamente en futuras visitas.
• Implementar funcionalidades offline, como guardar datos temporalmente mientras el usuario no tiene conexión a internet.
• Almacenar tokens de autenticación (con precauciones de seguridad).

Casos de Uso Comunes para sessionStorage

• Almacenar datos del carrito de compras durante la sesión del usuario.
• Guardar el estado de la sesión actual, como la página en la que se encuentra el usuario o los filtros aplicados.
• Almacenar datos temporales que se necesitan en varias páginas durante la sesión, pero que no deben persistir después de que el usuario cierra el navegador.
• Manejar la información de inicio de sesión temporalmente.

Consideraciones de Rendimiento

• Acceder a localStorage y sessionStorage es una operación síncrona que puede bloquear el hilo principal del navegador, especialmente si se almacenan grandes cantidades de datos.
• Evitar realizar operaciones intensivas de lectura/escritura en localStorage y sessionStorage en momentos críticos del rendimiento, como durante la animación o el scroll.
• Considerar el uso de Web Workers para realizar operaciones en segundo plano y evitar bloquear la interfaz de usuario.

Cuotas de Almacenamiento

• Los navegadores imponen cuotas de almacenamiento a localStorage y sessionStorage para evitar que los sitios web consuman demasiado espacio en el dispositivo del usuario.
• La cuota exacta varía según el navegador y el dispositivo, pero generalmente se sitúa entre 5MB y 10MB por dominio.
• Se puede verificar el espacio disponible y utilizado mediante APIs específicas del navegador (aunque no existe un estándar).

Limpieza de Datos

• Es importante implementar mecanismos para limpiar los datos almacenados en localStorage y sessionStorage que ya no son necesarios para evitar consumir espacio innecesario y mejorar el rendimiento.
• Se puede implementar una política de caducidad para eliminar datos antiguos automáticamente.
• Ofrecer a los usuarios la opción de limpiar sus datos almacenados localmente.

Diferencias Clave Resumidas

• localStorage: Persistente entre sesiones del navegador; mayor capacidad de almacenamiento.
• sessionStorage: Temporal, dura solo la sesión del navegador; útil para datos temporales específicos de la sesión.