localStorage vs sessionStorage vs Cookies: una comparación detallada

Las cookies han estado con nosotros durante mucho tiempo (Internet Explorer v2 las admitió en octubre de 1995). No tienen nada de malo, y ciertamente hicieron de la web un lugar más agradable, pero después de casi 25 años muchas cosas han cambiado.

El almacenamiento local (lo encontrará en Almacenamiento web en W3) es y no es un reemplazo de las cookies. Eso es lo más confuso al respecto. En la mayoría de los casos, puede usar localStorage de manera segura en lugar de cookies y tener la impresión (errónea) de que son lo mismo, mientras que no lo son. Siga leyendo para ver un desglose sensato de cómo y cuándo usar localStorage para reemplazar las cookies.

¿Revolución o evolución?

El almacenamiento local, o localStorage, o el almacenamiento DOM o el almacenamiento web (no estoy inventando estos nombres; todos ellos están en uso y todos hacen referencia a lo mismo) se adoptaron en el mundo real entre los navegadores populares en 2012 como un "HTML5 rasgo". Parecía un reemplazo divino para las galletas. Una solución para las solicitudes infladas que llevan datos innecesarios todo el tiempo y las limitaciones de tamaño. Si bien "resuelve" esos problemas, no es un reemplazo de manzanas por manzanas para las cookies.

Y ya que estamos en el tema de los datos innecesarios. ¿Sabía que las solicitudes no son lo único que puede tener una hinchazón innecesaria, su sitio también puede hacerlo? Afortunadamente, hay una solución y se llama WP Reset.

WP Reset es un complemento que viene con una variedad de opciones de restablecimiento que le permitirán hacer cosas como eliminar datos acumulados y/o complementos (complementos, temas, usuarios, widgets, contenido, etc.) de su sitio y incluso limpiando todo el sitio. Increíble, ¿verdad? Pero eso no es todo. Entre otras características, este complemento puede crear instantáneas de la base de datos, así como colecciones de complementos y temas que puede instalar con un clic tantas veces como sea necesario. Definitivamente una herramienta que vale la pena probar.

Pero, ahora, volvamos a hablar de localStorage.

Como su nombre lo indica, los datos se almacenan localmente, en el dispositivo del usuario. Por lo tanto, no tiene que transferirse a través de la red con cada solicitud HTTP, lo que reduce la huella y nos brinda mucho más espacio para guardar los datos. Ese paradigma "solo local" es la diferencia más significativa entre las cookies y el almacenamiento local. Las cookies se pueden leer tanto del lado del servidor como del lado del cliente, el almacenamiento local solo en el lado del cliente. Eso es todo al respecto. Si su aplicación depende en gran medida de la lectura de cookies del lado del servidor y de la generación de contenido basado en ellas, cambiar al almacenamiento local significará reescribir la aplicación. Si solo usa cookies para almacenar configuraciones, como qué pestaña está activa en la interfaz, entonces el almacenamiento local es un reemplazo ideal.

engañosamente similar

La siguiente tabla ofrece una visión clara de las diferencias y casos de uso de cookies, localStorage y sessionStorage. Si bien puede echarle un vistazo rápidamente para obtener la respuesta que necesita e irse, le recomiendo leer las notas a pie de página un tanto largas que brindan más detalles. Sí, sé que estás ocupado y quieres ver el próximo video de gatos, pero las cosas no son en blanco y negro, así que profundizar un poco te hará bien.

Profundizando en el almacenamiento web y las cookies

La cantidad máxima de datos que puede almacenar localmente depende del navegador. No hay garantías y si quieres una apuesta segura, baja de 5 MB a unos 2 MB. Utilice esta práctica herramienta para probar el tamaño de almacenamiento local máximo permitido en su navegador.

Es un escenario común que los usuarios bloqueen las cookies de terceros o todas . La misma regla se aplica al almacenamiento local. No hay garantías y su aplicación tiene que funcionar (o al menos no fallar) en un entorno donde el almacenamiento local no está disponible.

Todas las cookies caducan en algún momento, pero la gente tiende a establecer la vida útil en unos pocos años, lo que parece una eternidad en el tiempo de Internet. El almacenamiento local, por otro lado, nunca caduca y está disponible hasta que la aplicación o el usuario lo elimine. El almacenamiento de la sesión se purga cuando se cierra la pestaña o la ventana, sin excepciones.

“¿Qué quieres decir con que solo se pueden guardar cadenas ? ¡Guardo objetos todo el tiempo!” JSON le permite guardar objetos y otros tipos de datos en forma de cadena. La conversión se realiza en lectura y escritura sin su conocimiento. Con una biblioteca sólida para manejar cookies y almacenamiento local, no tendrá que pensar en tipos de datos. Sin embargo, eso no cambia el hecho de que solo las cadenas son compatibles de forma nativa.

No hay una sola característica del lado del cliente que admitan todos los navegadores . Es un hecho triste, pero sigue siendo un hecho. Puede buscar números específicos en Can I Use, pero en lo que respecta a las cookies y el almacenamiento local, ignoraría todos los navegadores que no los admitan. Son marginales y por debajo del 1%.

No puede acceder a localStorage solo a través del procesamiento del lado del servidor. También necesitas JS. Cuando el usuario solicita una página y PHP se activa (o cualquier idioma del lado del servidor que use) para generarla, no tendrá acceso a ningún dato local, sesión o permanente. Una vez que la página se carga y JS se activa, puede acceder a los datos locales y hacer lo que necesite: ajustar la interfaz de usuario o utilizar AJAX para enviar datos locales al servidor. Entonces, sí, puede devolver los datos locales al servidor, pero no de la misma manera y en el mismo momento que lo haría con una cookie. Dependiendo de sus requisitos, esto puede ser un factor decisivo cuando se trata de cambiar de cookies a almacenamiento local, así que, ¡planifique con anticipación!

Con el almacenamiento local, no se transfieren datos entre el cliente y el servidor (a menos que haya un código que lo haga explícitamente). Es excelente para reducir el tamaño de la carga útil. Las cookies, por otro lado, se transfieren como campo de encabezado HTTP con cada solicitud en el dominio establecido. Eso no se puede cambiar o apagar selectivamente.

Los usuarios “no deberían” acceder a los datos locales y cambiarlos directamente (fuera de su aplicación), pero nada les impide hacerlo. Existen numerosas herramientas de depuración disponibles para editar datos almacenados localmente. Así que no confíes en los datos locales ni asumas que el usuario no los tocó. Asume siempre lo peor.

Si bien las cookies tienen un atributo "seguro" que puede configurar, eso no protege la cookie en tránsito desde la aplicación al navegador. Así que es mejor que nada, pero lejos de ser seguro. El almacenamiento local, al ser una tecnología solo del lado del cliente, no sabe ni le importa si usa HTTP o HTTPS. La seguridad tiene que provenir de la forma en que maneja los datos. ¡No almacene datos confidenciales, como números de tarjetas de crédito o contraseñas, en ninguna forma de almacenamiento local! ¡Alguna vez!

Un poco de código para empezar

Este artículo no pretende ser un tutorial de almacenamiento web de JavaScript, pero para evitarle problemas, aquí hay un ejemplo de Hello World con almacenamiento local;

// store a value
localStorage.setItem( 'name', 'John' );

// retrieve a value
localStorage.getItem( 'name' );

// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var post = {
  title: 'Cookies are old',
  author: 'Gordan'
}
localStorage.setItem( 'post', JSON.stringify( post ) );

// and to retrieve
var post = JSON.parse( localStorage.getItem( 'post' ) );

El código anterior funciona y es lo más simple posible. Sin embargo, no recomiendo usarlo. Al igual que con las cookies, nadie utiliza document.cookies para interactuar con ellas. Hay diferencias menores entre navegadores que se deben tener en cuenta y, dado que solo almacenan cadenas, debe clasificar y analizar con JSON en cada lectura y escritura. Es por eso que usamos bibliotecas pequeñas para ayudarnos a manejar cookies como js-cookie. Lo mismo ocurre con el almacenamiento local. Poner una pequeña capa de abstracción entre su código y la API ayudará a largo plazo. Recomiendo store.js. Ha existido por un tiempo, se encarga de las tonterías y los retrocesos entre navegadores e incluso tiene complementos útiles que amplían sus funciones. Si está interesado en alguna práctica de codificación, cree su propia biblioteca y conviértala en un complemento jQuery.

Las cookies son malas, ¿verdad? ¡Necesitamos algo nuevo!

Las galletas no son malas. Han cumplido su propósito durante décadas y seguirán haciéndolo, ya que el almacenamiento local no es un reemplazo de "manzanas por manzanas". Sin embargo, las cookies muestran signos de envejecimiento. Aparte de eso, algunas de sus deficiencias de diseño tampoco desaparecerán pronto. Es decir, "contaminar" cada solicitud en el dominio con carga útil de cookies y un tamaño de carga útil máximo pequeño.

Inadecuadas y viejas o no, las cookies están aquí para quedarse, así que no crea que el almacenamiento local se hará cargo por completo en el corto plazo. Sin embargo, en algunos casos de uso, el almacenamiento local es sin duda una mejor opción.

Si tiene (muchos) datos para almacenar en el lado del cliente que rara vez se transfieren al servidor y esos datos no contienen nada confidencial, ¡ comience a usar el almacenamiento local ! Es precisamente para lo que fue creado. Creará una aplicación más rápida al hacer que todas las solicitudes HTTP en el dominio sean más ligeras y obtendrá esa sensación cálida y difusa de usar algo nuevo.