Storage API: LocalStorage y SessionStorage

Las peticiones realizadas por el protocolo HTTP son stateless(sin estado); lo que significa que no son capaces de mantener información. Este es un problema en el desarrollo de los sitios web, ya que los navegadores requieren información proveniente del servidor para su correcto funcionamiento. Para solventar esta problemática, se crearon las cookies que son pequeños fragmentos de texto que son enviados por el servidor al navegador del cliente para compartir información. Esta información permite mejorar la navegación del usuario en el sitio web, dado que las cookies permiten al sitio recordar información sobre tu visita.

Estos pequeños fragmentos de texto permiten mantener información como el idioma de preferencia, mantener información sobre el acceso del sitio web, entre otras.

Sin embargo, estas cookies poseen una pequeña desventaja, dado que la petición se realiza en cada consulta a la pagina web, lo que aumenta la cantidad de datos consultados y el tiempo de espera. Además, de que son peticiones bastante limitadas en tamaño, cada una tiene un límite de 4096 bytes.

Con la llegada de HTML5, las tecnología de almacenamiento vieron una revolución al implementarse la Storage API, un objeto de almacenamiento que permite guardar información necesaria del servidor en el navegador del cliente, sin la necesidad de realizar una consulta por cada petición del servidor. Es decir, la información se envía o se actualiza cuando es necesaria, aligerando los tiempos de carga.

Cada objeto de la Storage API se comportan de manera similar entre sí,  utilizan un esquema de key-value para el almacenamiento de información, poseen una capacidad de almacenamiento de 5 mb y no tienen fecha de límitación a diferencia de las cookies.

Los objetos de la Storage API se dividen en dos: localstorage y sessionstorage. La diferencia principal entre las dos propiedades es su vida útil, ya que la información del objeto sessionstorage acabará cuando se cierre la ventana actual de navegación, mientras que, el objeto local, la información no expirará, se mantendrá hasta que se limpie la información guardada del navegador o mediante javascript.