El almacenamiento del lado del cliente es esencial para las aplicaciones web. Puede que no sea tan resistente como el almacenamiento del lado del servidor, pero, sin él, las aplicaciones web no podrían implementar muchas características modernas. Todo tipo de características dependen del almacenamiento del lado del cliente, desde sesiones en juegos hasta carritos de compras en sitios web de comercio electrónico.
El almacenamiento del lado del cliente también permite que las aplicaciones web implementen una arquitectura centrada en la privacidad. Puede usarlo para asegurarse de que los datos confidenciales nunca abandonen el dispositivo de un usuario.
¿Qué es el almacenamiento del lado del cliente?
En el desarrollo web, el almacenamiento del lado del cliente se refiere a las diversas formas en que los navegadores web pueden almacenar datos. Luego, una aplicación puede usar estos datos para proporcionar funcionalidad a los usuarios. El almacenamiento del lado del cliente es fundamental por varias razones:
- Los datos almacenados en el cliente son significativamente más rápidos de acceder y su aplicación puede acceder a ellos sin Internet.
- El almacenamiento del lado del cliente facilita que su aplicación recuerde las preferencias de cada usuario.
- El almacenamiento permanente de algunos datos en el cliente facilita la protección de la privacidad del usuario.
- Almacenar todos los datos de la aplicación en el servidor es costoso, especialmente a gran escala.
Hay varias formas diferentes de almacenamiento del lado del cliente que puede usar en sus aplicaciones web.
Galletas
Una cookie del navegador es una pieza de datos de clave/valor almacenada como una cadena en su computadora. Los navegadores envían todas las cookies de un sitio en particular al servidor del sitio en cada solicitud. Las cookies fueron el primer (y durante un tiempo, el único) tipo de almacenamiento del lado del cliente.
No existe un límite oficial en el tamaño de una cookie, pero los navegadores individuales imponen límites variables en el tamaño y la cantidad de cookies que puede configurar. los RFC 6265 Sección 6.1 establece las siguientes capacidades mínimas de cookies que los navegadores (agentes de usuario) deben proporcionar:
Las implementaciones prácticas de agentes de usuario tienen límites en la cantidad y el tamaño de las cookies que pueden almacenar. Los agentes de usuario de uso general DEBERÍAN proporcionar cada una de las siguientes capacidades mínimas:
- Al menos 4096 bytes por cookie (medido por la suma de la longitud del nombre, el valor y los atributos de la cookie).
- Al menos 50 cookies por dominio.
- Al menos 3000 galletas en total.
Las cookies pueden permanecer en el navegador durante períodos de tiempo variables. Algunos caducan al final de una sesión de página y otros tienen fechas de caducidad arbitrarias que pueden extenderse hasta meses en el futuro.
Los navegadores crean una sesión de página cuando abre una nueva pestaña y la finalizan cuando cierra la pestaña o el navegador. Si vuelve a cargar o actualiza la página, el navegador no finalizará la sesión de la página.
Casos de uso de cookies
Las cookies son más adecuadas para almacenar pequeños fragmentos de datos que el servidor necesita leer o modificar con frecuencia. ¿Por qué?
- Las cookies se adjuntan automáticamente a todas las solicitudes de red
- Las cookies solo pueden almacenar pequeñas cantidades de datos de cadenas.
Puede usar cookies para identificar a un usuario (como una ID de sesión), registrar una visita a una página con fines de marcadores o almacenar la puntuación más alta de un juego.
Almacenamiento local
Al igual que una cookie, localStorage es un almacén de clave/valor que almacena datos de cadenas. Si bien ambos tipos de almacenamiento son similares, localStorage y las cookies difieren de varias maneras:
- LocalStorage depende de JavaScript.
- Los datos en localStorage residen principalmente en el navegador. Debe enviarlo deliberadamente al servidor, en lugar de que el navegador lo envíe en cada solicitud.
- LocalStorage no tiene fecha de caducidad. Persiste en el cliente hasta que un desarrollador lo elimine con JavaScript o el usuario borre el almacenamiento de su navegador.
- LocalStorage tiene una capacidad de almacenamiento mucho mayor. los especificaciones de WHATWG no especifica un límite estricto pero, según Wikipedia, el tamaño mínimo de localStorage entre los principales navegadores es de 5 MB:
Los navegadores restringen las cookies a 4 kilobytes. El almacenamiento web proporciona una capacidad de almacenamiento mucho mayor:
- Opera 10.50+ permite 5 MB
- Safari 8 permite 5 MB
- Firefox 34 permite 10 MB
- Google Chrome permite 10 MB por origen
- Internet Explorer permite 10 MB por área de almacenamiento
Casos de uso para almacenamiento local
LocalStorage es perfecto para almacenar una gran cantidad de datos que el servidor rara vez necesita consultar. Esto podría ser la configuración de usuario de una aplicación, los detalles de configuración del tema o los datos en un formulario completado recientemente. Esto se debe a que localStorage tiene un límite de almacenamiento mucho mayor que las cookies, pero debe realizar un esfuerzo adicional para enviar sus datos al servidor.
Si almacena los datos como JSON, puede almacenar datos razonablemente complejos usando localStorage, aunque solo puede almacenar cadenas.
LocalStorage es vulnerable a Ataques XSS, por lo que no debe almacenar datos confidenciales de clientes en él.
SesiónAlmacenamiento
SessionStorage es un almacén de clave/valor que funciona casi lo mismo que localStorage, salvo por una cosa. Los datos almacenados solo persisten durante la duración de una sesión de página.
Casos de uso para SessionStorage
Puede usar SessionStorage para almacenar el mismo tipo de datos que localStorage, pero solo cuando los datos no necesitan persistir más allá de una sesión de página.
Base de datos indexada
IndexedDB es una poderosa API de navegador para almacenar grandes cantidades de datos estructurados. Es una base de datos transaccional orientada a objetos que almacena datos en pares clave/valor.
Si está tratando con cantidades más pequeñas de datos, localStorage/sessionStorage es la opción mejor y más fácil. Desafortunadamente, están limitados por su capacidad de almacenamiento y por el hecho de que solo pueden almacenar datos de cadenas. IndexedDB no solo permite almacenar diferentes tipos de datos, incluidos archivos/datos binarios, sino que también puede almacenar muchos más datos. IndexedDB también construye índices de su contenido para permitir una búsqueda rápida en la base de datos.
Casos de uso para IndexedDB
IndexedDB es esencialmente una base de datos NoSQL en el navegador y puede almacenar grandes cantidades de datos. Cualquier caso de uso que requiera almacenar más de 10 MB de datos es apropiado para IndexedDB.
A diferencia de otras formas de almacenamiento del navegador, IndexedDB no se limita a almacenar cadenas. IndexedDB puede almacenar datos de todos los tipos de JavaScript estándar. Si crea una aplicación web para trabajar principalmente sin conexión, puede usar IndexedDB para almacenar todos los datos de la aplicación.
El almacenamiento del lado del cliente es flexible y potente
El término almacenamiento del lado del cliente se refiere al almacenamiento de datos de la aplicación en el navegador. El almacenamiento del lado del cliente es esencial para el funcionamiento de la mayoría de las aplicaciones web modernas. Hay varios tipos de almacenamiento del lado del cliente: cookies, local/sessionStorage e IndexedDB.
Todos los tipos de almacenamiento del navegador tienen diferentes límites en cuanto a su capacidad y el tipo de datos que pueden almacenar. Las cookies son el tipo más limitado, local/sessionStorage es la más conveniente e IndexedDB es la más poderosa.
