Cookies vs localStorage vs sessionStorage

Diferentes maneras de almacenar información del usuario en el navegador web

Antes de HTML5, la información de las aplicaciones sólo se podía guardar en cookies.

Tanto localStorage, como sessionStorage como las cookies, son soluciones que sirven para guardar información en el cliente, pero cada una tiene sus particularidades.

localStorage y sessionStorage

Aunque HTML5 ya es un estándar en los principales navegadores modernos, hay versiones anteriores que no soportan este tipo de almacenamiento. Estos son los principales navegadores y las versiones en las que localStorage y sessionStorage son compatibles:

• Internet Explorer: 8.0
• Firefox: 3.5
• Chrome: 4.0
• Safari: 4.0
• Opera: 11.5

La única diferencia entre localStorage y sessionStorage, es que en localStorage se guarda la información de forma persistente en el navegador, es decir, si el usuario cierra el navegador y vuelve a entrar en la web, la información aun seguirá disponible.

En cambio, en sessionStorage, la información sólo dura lo que dure la sesion del navegador. Al cerrar la ventana se perderá la información.

También hay que decir que el sessionStorage sólo sirve para la ventana que se está viendo. Si el usuario abre un enlace de la aplicación en una nueva ventana o un nuevo TAB, esta información tampoco estará disponible.

localStorage y sessionStorage son útiles para persistir información no sensible entre páginas. Nunca debería guardarse información sensible como pueden ser las contraseñas o información que puedan comprometer la seguridad del usuario.

Veamos cómo funcionan. Para guardar un elemento en localStorage y sessionStorage podemos hacer

localStorage.setItem('color', 'rojo');
sessionStorage.setItem('color', 'rojo');

Para obtener un valor que ya está guardado en localStorage o sessionStorage:

localStorage.getItem('color');
sessionStorage.getItem('color');

Si queremos guardar información más compleja podemos usar JSON.stringify para guardar

localStorage.setItem('objeto', JSON.stringify({a: 1}));

y JSON.parse para cargar datos:

const obj = localStorage.getItem('objeto');
JSON.parse(obj);

Cookies

Las cookies también pueden ser leídas por el usuario y no se debe guardar información comprometida. Este tipo de información siempre tiene que guardarse en la sesión del servidor.

Además, como las cookies se suelen usar para autentificación, todas las cookies válidas para una página se envían del navegador al servidor en cada petición del mismo dominio. Es decir, por cada petición que el navegador haga al servidor, ya sea una página html o una llamada ajax, imágenes o fuentes se envía una cookie. Es por esta razón que las cookies no deben almacenar demasiada información. Lo más común es usar cookies para guardar tokens (identificadores encriptados) que identifican la sesión del usuario en el servidor, o bien para hacer un seguimiento de publicidad.

Las cookies sólo permiten guardar strings (cadenas de texto), mientras que los otros dos sistemas permiten guardar objetos primitivos Javascript como integers, strings, pero no arrays ni objetos. Para guardar estos últimos también se suele serializar y codificar el objeto en JSON.

Conclusión

La información de sesión se debe controlar por la aplicación desde el servidor. Es el mejor lugar para almacenar información de caracter sensible. Sin embargo, el principal inconveniente es la escalabilidad. Como desde el servidor no hay manera de saber si un usuario cierra el navegador o visita una página externa, la información de sesión deberá expirar al cabo de un tiempo para evitar que consuman todos los recursos del servidor.

Finalmente, hay que mencionar que los tres sistemas de almacenamiento estan sujetos a la regla del mismo dominio "same-origin", que significa que los navegadores no permitirán acceder a información de dominios distintos del que se está realizando la petición.