APIs HTML5: localStorage

LocalStorage, o DOM Storage como lo llaman algunos fabricantes, hace referencia a la especificación HTML5 Web Storage que permite la persistencia de objetos llave/valor en el navegador de forma similar a las cookies, en el sentido de que los datos permanecerán aunque salgamos de la página, cerremos la pestaña o el navegador. Sin embargo, al contrario de lo que sucede con las cookies, esta información nunca se envía al servidor.

Este estándar fue adoptado por la mayoría de navegadores prácticamente desde el mismo momento en que se hizo público el documento de especificación del W3C allá por 2009, así que lo encontraremos en prácticamente cualquier navegador, y con seguridad en cualquier navegador moderno de escritorio o móvil.

El acceso a este almacenamiento se realiza a través del objeto localStorage, así que una forma de saber si disponemos de él sería haciendo lo siguiente:

function supports_html5_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

Sin embargo, como digo es difícil encontrar a día de hoy un navegador que no lo soporte.

Uso de localStorage

Como he comentado, se trata de un almacenamiento de tipo llave/valor, pudiendo asociar a un string (llave) un determinado valor. Este valor puede ser de cualquier tipo básico soportado por javascript, a saber: string, integer, boolean y float.

A continuación se muestra cómo podemos guardar y recuperar un valor a través del objeto localStorage:

//Guardar un valor
localStorage.setItem('hola', 'Mundo');
//Recuperar un valor
var v = localStorage.getItem('hola');
//Borramos el valor
localStorage.removeItem('hola’);

También podemos trabajar con el objeto localStorage como si un objeto stándard de javascript se tratase:

localStorage.hola = 'Mundo';
var v = localStorage['hola’];
delete localStorage.hola;

localStorage también proporciona la variable length por la que podremos saber el número de objetos guardados hasta el momento. Sabiendo el número total de objetos también podremos acceder a las llaves definidas hasta el momento con la función key(), a la que tendremos que pasar un valor numérico entre 0 y length-1. Ejemplo:

localStorage.hola = 'Mundo';
console.log(localStorage.length); // salida: 1
console.log(localStorage.key(0)); // salida: “hola”

Por último, si necesitamos limpiar completamente toda la información almacenada podremos hacer uso de la función localStorage.clear().

Formato de almacenamiento

Aunque podemos guardar cualquier valor de tipo básico de javascript como string, boolean, integer o float, el estándar determina que la información siempre se almacenará como string, así que habrá que tenerlo en cuenta a la hora de recuperar información utilizando parseInt() o parseFloat() según sea el tipo original del valor.

localStorage.numero = 45;
console.log(localStorage.numero); //salida: “45”
localStorage.real = 3.1416;
console.log(localStorage.real); //salida: “3.1416”

Esta peculiaridad es especialmente frustrante con los booleanos. Por ejemplo:

localStorage.falso = false;
if (localStorage.falso){
console.log(‘pues no es falso, es verdadero’);
}

Hay que tener cuidado con eso.

Limitación de espacio y chequeo

La especificación del W3C respecto a este estándar recomienda un máximo de 5MB para este tipo de almacenamiento por origen (por dominio), cantidad que ha sido bastante respetada por las implementaciones llevadas a cabo por los navegadores. Una vez que se alcance dicha cuota se emitirá una excepción de tipo “QUOTA_EXCEEDED_ERR”.

Aunque no hay un método estándar para saber el tamaño actual ocupado por localStorage, dado que sabemos que todos los datos se almacenan como strings podemos hacer la siguiente aproximación:

var localStorageSpace = function(){
  var allStrings = '';
  for(var key in window.localStorage){
    if(window.localStorage.hasOwnProperty(key)){
      allStrings += window.localStorage[key];
    }
  }
  return allStrings ? ((allStrings.length*16)/(8*1024)) + ' KB' : 'Empty (0 KB)';
};

Su hermano sessionStorage

Similar al objeto localStorage, podremos encontrar otro objeto llamado sessionStorage, cuya persistencia únicamente se garantiza mientras la página esté activa, es decir, mientras no cerremos la pestaña de navegación o el navegador. Ideal para hacer uso de caches

Uso actual de localStorage

localStorage se ha convertido en una herramienta esencial en numerosas aplicaciones web, si bien su uso se convierte en esencial en aplicaciones web móviles encapsuladas con Apache Córdova (PhoneGap), donde muchas de ellas no necesitan grandes necesidades de almecenamiento pero sí hacer persistentes ciertas preferencias de usuario, o cachear alguna información para uso en modo offline. Gracias a localStorage no es necesario recurrir a plugins extras cuando las necesidades de almacenamiento no son excesivas.

Eventos

También podemos detectar modificaciones en localStorage ya que cada vez que ejecutamos funciones como setItem, removeItem o clear, se dispara el evento ‘storage’, pudiendo establecer un listener sobre este:

window.addEventListener(“storage”, function(e){
// Internet Exprorer
if (!e) { e = window.event; }
}, false);

La función que asociemos al evento recibirá un parámetro de tipo StorageEvent donde se nos indicará la key modificada, el valor antiguo, el nuevo y la url que propició el cambio.

Depuración

Según el navegador que utilicemos podremos consultar visualmente el contenido almacenado en localStorage. Algunos navegadores incorporan estos visualizadores en sus herramientas para desarrolladores, como es el caso de Chrome y Safari (Recursos -> Almacenamiento local). Otros como firefox de momento necesitan hacerlo a través de una extensión.