icono_twiter icono LinkedIn
Miguel Arlandy Rodríguez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/JEE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2012-01-23

Tutorial visitado 10.286 veces Descargar en PDF
HTML5: Almacenamiento local.

HTML5: Almacenamiento local.


0. Índice de contenidos.


1. Introducción

Como la mayoría sabe, HTML5 está suponiendo una revolución en lo que a desarrollo web se refiere. Sus nuevas características hacen que desarrollar web´s sea, cada vez más parecido a desarrollar aplicaciones de escritorio. Las nuevas características de esta especificación se adaptan a las necesidades reales de los desarrolladores: vídeos, audio, gráficos, mejor estructuración del contenido...

Una de las nuevas características de HTML5 es el "Almacenamiento local" (Local Storage) de datos en el lado del cliente. En este tutorial intentarmos explicar qué es Local Storage, cómo usar esta característica y las diferencias respecto a las cookies.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15' (2.2 Ghz Intel Core I7, 8GB DDR3).
  • Sistema Operativo: Mac OS Snow Leopard 10.6.7
  • Entorno de desarrollo: Eclipse 3.7 Indigo.
  • Internet Explorer 9.
  • Google Chrome.
  • Mozilla Firefox 9.
  • Safari 5.1.

3. Almacenamiento local vs. Cookies.

Pues bien, lo primero de todo es explicar las diferencias entre el almacenamiento local y las cookies. Básicamente son dos:

  • El almacenamiento local nos permite guardar una mayor cantidad de datos en el cliente, normalmente unos 5MB (depende del navegador) frente a los 4KB por cookie.
  • En la comunicación cliente/servidor, las cookies almacenadas en el cliente son transmitidas en la cabecera de cada petición al servidor. Esto no sucede con LocalStorage.

Evidentemente cuando mayor capacidad de almacenamiento mucho mejor pero, me gustaría comentar sobre todo la segunda diferencia. Las cookies, son enviadas constantemente al servidor por cada petición que hace el cliente. Algunas veces esto es necesario (ej: cookie de sesión de usario) pero la mayoría de veces no lo es. Este envío innecesario de información hace que la comunicación se ralentice debido al consumo de ancho de banda. Por eso mucha gente dice: "¡las cookies son malas, hay que borrarlas!". No es así, las cookies sirven para lo que sirven y su uso es fundamental para el correcto funcionamiento de muchas aplicaciones pero, el uso inapropiado de ellas por parte de algunos desarrolladores hace que se produzcan efectos como la ralentización de la comunicación entre el cliente y el servidor. No obstante no está de más borrar las cookies de vez en cuando... ;)

Otra consecuencia del envío constante de información de cookies al servidor es un posible problema de seguridad si dicha información no va cifrada.

Una vez aclaradas las diferencias, vamos a ver cómo usar almacenamiento local en nuestras aplicaciones.


4. Local Storage y Session Storage.

Local Stogage y Session Storage son las implementaciones de la interface Storage que nos permitirán realizar las diferentes acciones que permite el almacenamiento local. Ambos son atributos del objeto window.

Los dos objetos actuan sobre el dominio de la aplicación. La diferencia entre ambos es muy sencilla, sessionStorage actua sobre el ámbito de la sessión del cliente, cuando el usuario cierra el navegador los datos se pierden, mientras que con localStorage los datos perduran indefinidamente.

La interface Storage define una serie de atributos y métodos con los que podremos realizar las diferentes acciones de almacenamiento y recuperación de datos:

  • getItem(key): devuelve un string con el valor del elemento con clave key.
  • setItem(key, value): almacena un valor (value) referenciado por una clave (key).
  • removeItem(key): elimina el par clave/valor con clave igual a key.
  • length: atributo que contiene el número de elementos (pares clave/valor) almacenados.
  • key(index): devuelve un string con la clave (no el valor) del elemento que ocupe la posición index dentro de la colección de datos.
  • clear(): elimina todos los elementos.

5. Comprobando la compatibilidad del navegador.

Como hemos dicho anteriormente, el almacenamiento local es una nueva característica de HTML5, por lo que debemos comprobar si es aceptada por el navegador. Es muy buena práctica realizar dicha comprobación si pensamos utilizar Local storage en una aplicación y no queremos tener posibles errores de javascript. En caso de que el navegador cliente no acepte esta característica siempre podremos adaptar el comportamiento de la aplicación ante esta adversidad.

Para ello basta con crear una función como la siguiente:


	<script type="text/javascript">

	function compruebaCompatibilidad() {
		if (window.sessionStorage && window.localStorage) {			alert('Tu navegador acepta almacenamiento local'); 
		} else {			alert('Lo siento, pero tu navegador no acepta almacenamiento local');		}	}
	
	</script>
	

Como vemos, la gracia está en preguntar si el objeto window contiene los atributos localStorage y sessionStorage.


6. Guardando y obteniendo datos.

Como vimos en el punto 4, las implementaciones de storage nos permiten almacenar y obtener datos de forma muy sencilla. Aquí os dejo un pequeño set de funciones:


	
	var storage = localStorage;
		
	function guardar(clave, valor) {	 	
	 	storage.setItem(clave, valor);
	 	alert('Valor guardado ' + clave + '=' + valor);
	}
	
	function eliminar(clave) {	 	
	 	storage.removeItem(clave);
	 	alert('Valor eliminado con clave ' + clave);
	}
	
	function verTodos() {
		for (var i=0; i < storage.length; i++) {
			var clave = storage.key(i);
			var valor = storage.getItem(clave);
			alert('Valor obtenido ' + clave + '=' + valor);
		}
	}
	

Obsérvese que no nos estamos refiriendo al objeto localStorage como window.localStorage sino directamente con localStorage ya que, al ser un atributo del objeto window, puede omitirse.

Lógicamente si hubiésemos utilizado sessionStorage en vez de localStorage el set de funciones seguiría funcionando igual salvo que el ámbito de los datos sería de sesión (se eliminarían los datos cuando el usuario cerrase el navegador o la pestaña con la que está navegando en la aplicación).


7. Notificando actualizaciones.

Pues básicamente esto sería todo lo relacionado con almacenamiento local. No obstante vamos a ir un poco más allá y registrar un listener de eventos de almacenado de datos. ¿Para qué?, muy sencillo.

Imaginemos que un usuario está navegando con varias pestañas en nuestra aplicación que, vamos a suponer que es una tienda on-line. Supongamos que mostramos la información de los productos que tiene en el carrito en base a consultas a los productos que ha clickado que han sido almacenados localmente. Si nuestro usuario tiene varias pestañas abiertas y selecciona un producto en una de ellas, este producto que se acabará de ver en el carrito debería verse en el carrito del resto de pestañas. Por tanto surgiría la necesidad de tener un listener que atienda a actualizaciones en el guardado o borrado de elementos.

	// función que será invocada cuando se produzca un almacenamiento 
	function manejarEventoAlmacenamiento(e) {	
		var key = e.key;
		var oldValue = e.oldValue;
		var newValue = e.newValue;
		var url = e.url;
		var storageArea = e.storageArea;
		// actualizaríamos lo que fuese...
	}
	
	// añadimos el listener que dispará la función cuando se produzca el evento de almacenamiento
	window.addEventListener("storage", manejarEventoAlmacenamiento, false);

Por desgracia, y seguro que a muchos les es muy familiar, este registo de eventos no funciona como debería en Internet Explorer :( ya que no lo propaga al resto de pestañas.

A continuación se muestra un ejemplo de uso:


PODEIS VER EL EJEMPLO COMPLETO AQUÍ. Recordar que si queréis probar el ejemplo en local debéis hacerlo correr bajo un dominio (ej: localhost)...


8. Referencias.


9. Conclusiones.

En este tutorial hemos visto cómo persistir datos de una aplicación localmente sin necesidad de utilizar cookies. Vuelvo a insistir en que, si estamos pensando en añadir este comportamiento a nuestras aplicaciones, es importante comprobar antes si el cliente dispone de esta capacidad. Pensemos que todavía existen muchos usuarios que siguen utilizando navegadores obsoletos que no soportan HTML5. Por suerte cada vez quedan menos :D

Espero que este tutorial os haya sido de ayuda. Un saludo.

Miguel Arlandy

marlandy@autentia.com

Twitter: @m_arlandy

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: