HTML5 Web Storage

Antes de HTML5 el único lugar donde podíamos almacenar información del lado del cliente eran las cookies, lo cual traía muchos problemas ya que hay muchas desventajas de utilizar cookies para almacenar datos. Entre las dos principales desventajas tenemos:

  • El límite de almacenamiento es de 4kb.
  • Las cookies son enviadas con cada pedido HTTP, con lo que el rendimiento de la aplicación decrece.

HTML5 nos ofrece una mejor solución que evita los problemas de las cookies y dispone de todo el espacio necesario en el cliente. Esta funcionalidad se denomina Web Storage.

¿Qué es HTML5 Web Storage?
Web Storage es una base de datos del lado del cliente que permite persistir los datos en forma de pares claves/valor. Posee una API simple para escribir y obtener los datos y puede almacenar hasta 5mb por dominio. A diferencia de las cookies, los datos no son incluidos en el pedido HTTP. Los navegadores como IE7 o inferior no tienen soporte para esta característica.
Tipos de almacenamiento
Existen dos tipos de Web Storage:

  • Local Storage: Almacena los datos sin fecha de caducidad, los datos estarán disponibles incluso si se cierra el navegador o la pestaña.
  • Session storage: Almacena datos para una sesión, los datos se pierden cuando el usuario cierra el navegador.

Es importante aclarar que en ambos casos los datos no se pueden compartir entre diferentes navegadores. Y que los datos están en los pc’s del usuario. La especificación describe dos objetos de almacenamiento: localStorage y sessionStorage, que utilizan la misma interfaz con lo cual cualquier cosa que hagamos con uno, podemos hacerlo con el otro.
Storage API
La Storage API consiste en algunas funciones que nos permiten guardar y acceder a los datos:
Guardar un dato

Obtener un dato

También es posible guardar y acceder a datos utilizando corchetes:

O utilizando la notación de punto

Para quitar un elemento podemos utilizar la función removeItem

Si queremos eliminar todos los datos podemos utilizar la función clear

Datos complejos
Web Storage está limitado a almacenar valores tipo string, y no podemos guardar otros datos sin convertirlos antes a string. Si tenemos que guardar un objeto complejo, podemos utilizar la funcionalidad que nos permite JSON de transformar un objeto a string.

Si queremos obtener los datos hay que acordarse de hacer un parse de los mismos.

Reiterar sobre valores almacenados
Si queremos reiterar sobre los elementos almacenados podemos utilizar:

  • La propiedad length que indica la cantidad de pares clave/valor que hay almacenados en el objeto.
  • La función key que devuelve el nombre de una clave que le pasemos

Puede ser que las claves no hayan sido agregadas en el orden que nosotros las pusimos, ya que el navegador puede alterar el orden.
Detectar si el navegador es compatible con Web Storage
Antes de trabajar con Web Storage es importante verificar si el navegador del usuario posee esta capacidad de HTML5. Esto lo podemos hacer de dos formas:

Utilizando la API

Utilizando Modernizr

Modernizr es una librería JavaScript que nos detecta si el navegador es compatible con HTML5 y CSS3. Para usarla hay que descargarla y agregar el script a la página.

Límite de almacenamiento
Si almacenamos muchos datos excederemos el límite de 5mb que tenemos de almacenamiento. Si esto ocurre se lanzará una excepción llamada QUOTA_EXCEEDED_ERR, por lo cual es recomendable guardar datos siempre dentro de un bloque try/catch.

 

facebook HTML5 Web Storagetwitter HTML5 Web Storagegoogle HTML5 Web Storagediggit HTML5 Web Storagepinterest HTML5 Web Storagelinkedin HTML5 Web Storageprint HTML5 Web Storageemail HTML5 Web StorageSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.