HTML5: LOCALSTORAGE VS SESSIONSTORAGE

HTML5 está muy de moda. Muchas ofertas de empleo tienen como requisito indispensable conocer HTML5 para el desarrollo del front-end de aplicaciones. Muchas navegadores soportan en mayor o menor grado sus características: nuevas etiquetas, nuevos componentes para formularios, soporte para drag&drop nativo, geolocalización, soporte para contenido multimedia, web workers, web sockets, almacenamiento local... Es de esto último de lo que hablaremos en el post, explicando para que sirve, los tipos de almacenamiento local y un ejemplo de uso.

Cookies 2.0. Almacenamiento de datos en cliente.

Las aplicaciones web han utilizado las cookies para almacenar datos de cliente en el navegador. Pero éstas contaban con una serie de problemas:

• Las cookies se mandaban con la petición HTTP una y otra vez, lo que hacia la comunicación cliente-servidor más lenta además de que siempre no era necesario.

• Suponían un problema de seguridad si nuestra aplicación no corría sobre protocolos seguros como SSL.

• La limitación de almacenamiento de datos, sólo podíamos guardar 4KB lo que a veces podía ser insuficiente.

Con el almacenamiento local de HTML5 que algunos llaman Cookies 2.0 superamos todas estas limitaciones:

• Posibilidad de almacenar gran cantidad de datos (normalmente 5MB), lo que nos permite trabajar con una aplicación web como si fuera una aplicación de escritorio offline.

• No se transmite con cada petición HTTP al servidor.

Tipos de almacenamiento local

Hay dos tipos de almacenamiento local que implementan la interface Storage: Local Storage y Session Storage. 

Los dos son métodos accesibles desde el objeto window. La diferencia es que Session Storage actúa sobre la sesión de un cliente, por lo que cuando el usuario cierra la ventana del navegador desaparecen los datos guardados. Con Local Storage los datos persisten aunque se cierre la ventana del navegador.

La interfaz Storage define una serie de atributos y métodos con los que se pueden guardar, borrar y recuperar 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.

Además podemos registrar un listener (storage) para saber cuando se ha modificado el valor de una clave y realizar una acción al respecto.

Ejemplo de uso.

He hecho un página HTML en la que se pueden ver las diferencias entre el local storage y el session storage y su uso trivial. Para comprobar que tu navegador tiene compatibilidad con Local Storage y Session Storage utilizamos la siguiente función:

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

Para obtener un valor del Local Storage se utiliza el siguiente código:

localStorage.getItem('DATOL')

Para establecer un valor en el Local Storage se utiliza el siguiente código:

 localStorage.setItem("DATOL",  $("#valueL").val());

Para borrar todos los datos del Local Storage se utiliza el siguiente código:

localStorage.clear();

Para borrar un dato del Local Storage se utiliza el siguiente código:

localStorage.removeItem("DATOL");

El código completo lo podéis descargar aquí.

En el ejemplo podemos almacenar el valor de una variable en el Local Storage (DATOL) y en la Session Storage (DATOS). También podemos comprobar la compatibilidad con nuestro navegador y borrar todas las variables almacenadas en el Local Storage y en el Session Storage.

Con Google Chrome (imagino que también con otros navegadores) podemos ver el contenido del Local Storage y Session Storage si pulsamos Herramientas > Consola Javascript > Resources:

Si guardamos un valor en el Local Storage y otro en el Session Storage y cerramos nuestra ventana en el navegador cuando la abramos de nuevo sólo aparecerá la variable del Local Storage (en la ventana de ejemplo se recargan las variables si existen en cada uno de los Storage).

Espero que os haya servido.

Salu2.