El API Javascript de almacenamiento local de HTML5 (local-storage) [Parte 1]

HTML5 llegó para quedarse y con esta nueva tecnología vienen una serie de ventajas y posibilidades que anteriormente no se tenían (o se tenían de manera muy limitada) como es el caso del almacenamiento de datos.

Lo que anteriormente teníamos que manejar con las cookies, ahora podremos manejarlo de una manera más avanzada y completa con el API Javascript de almacenamiento local que viene incluída en HTML5.

Los antecedentes
Si estás construyendo un sitio web y necesitas almacenar algunas preferencias del usuario o asociar cierta cantidad de datos al mismo para utilizarla posteriormente la solución a tu problema sería el almacenamiento local a través del navegador.

Al hablar del almacenamiento local en el pasado (de 1995 a 2010 para ser específico) tendríamos que abordar el tema de las cookies. Las cookies que no son más que pares de datos que vienen incluidos en la respuesta que te brinda un servidor web al solicitar un sitio (o una sección del mismo) y que, una vez que se tienen, se envían en la petición para que el servidor nos envíe una respuesta tomando como  parámetros los valores incluidos en ella.

Un ejemplo de los valores que una cookie puede tener son los siguientes:
    fondo=negro;edad=28;apodo=monillo007;

Una cookie puede almacenar cualquier cantidad de pares de datos siempre y cuando no excedan los 4k. Los datos que estas almacenan pueden ser utilizados para personalizar la experiencia del usuario entre otras muchas cosas.

Una cookie se asocia al dominio, por ejemplo, www.undominio.com por lo que www.otrodominio.com no podría utilizarla en lo absoluto.

Dadas las características de las cookies se pueden identificar las siguientes desventajas al trabajar con ellas:

• Sólo se tienen 4k para trabajar lo cual es bastante limitado.
• Enviar y solicitar una cookie cada vez es bastante ineficiente, sobretodo si trabajamos con un dispositivo móvil en el cual el ancho de banda se vuelve vital.
• Las cookies pueden ser utilizadas para enviar virus y malware hacia el navegador.
• Entre los datos que se envían y se solicitan cada vez puede incluirse información personal importante.
• Todo el trabajo depende del servidor web por lo que no es completamente 'local'.

¿Decepcionado de las cookies? Afortunadamente ya existe HTML5.

   
¿Cómo trabaja HTML5 con el almacenamiento?
En pocas palabras HTML5 provee de un API Javascript simple que trabaja completamente del lado del cliente y que almacena datos de manera persistente, ofrece mucho más capacidad (de 5 a 10Mb dependiendo del navegador) y los datos se envían al servidor sólo si se desea que así suceda.

Digamos que el API se creó tomando en cuenta las aplicaciones web y sobretodo las aplicaciones móviles. El almacenamiento local que HTML5 provee te ayuda a que la aplicación almacene más datos en el navegador para reducir la comunicación que necesita con el servidor, y con ello, disminuir el ancho de banda necesario para ejecutarla.

Algunas de las características del almacenamiento de datos con HTML5 son:

• Es posible, al igual que con las cookies, almacenar pares de datos (nombre/valor).
• Cada uno de los navegadores modernos provee desde 5 hasta 10Mb de espacio disponible para almacenamiento (muy superior a los 4k de las cookies).
• El almacenamiento es persistente lo cual significa que los datos se mantienen aún si cierras la ventana de la aplicación o incluso cierras el navegador completamente.
• Al igual que las cookies, el API solo permite el acceso a los datos desde el dominio que fueron creados.

Hasta aquí llegamos con la primera parte de esta serie del API Javascript de Almacenamiento local de HTML5, en los siguientes artículos estaremos abordando el tema de manera práctica por lo que te recomiendo estar al tanto y suscribirte al blog si aún no lo has hecho.

Si quieres conocer más acerca de HTML5 no dudes en darte una vuelta por este enlace y si te gustó el artículo puedes compartirlo desde los botones sociales (Twitter, Facebook, Google+).