Web Storage

A veces puede resultar interesante, para un sitio web, guardar datos en el ordenador del usuario, por ejemplo, para almacenar una configuración o para guardar información de la sesión. Las cookies suelen ser usadas para ello pero tienen algunas limitaciones. Por una parte pueden ocupar un máximo de 4KB. Por otra, se envían al servidor en la cabecera de todas las peticiones. Como alternativa, desde hace algunos años existe la posibilidad de usar Web Storage a modo de base de datos local. Los datos se almacenan como pares clave-valor que pueden ser recuperados por las páginas web que pertenezcan a un mismo dominio (información sobre qué quiere decir un mismo dominio). A diferencia de las cookies los datos almacenados con Web Storage no se envían automáticamente al servidor y su capacidad de almacenamiento es mucho mayor.

Existen dos maneras de almacenar los datos con Web Storage: de manera temporal, hasta el final de la sesión (hasta que se cierra la pestaña que ha contenido nuestra web), que recibe el nombre de Session Storage, y de manera permanente, llamado Local Storage. La manera de archivar y acceder a los datos es igual en ambos casos, así que nos vamos a centrar en Local Storage.

El límite de capacidad de este almacenamiento de datos viene dado por el navegador y actualmente se encuentra en 5 MB por dominio en Chrome, Firefox y Opera y 10 MB en Internet Explorer.

Un detalle que hay que tener en cuenta es que siempre se almacenan cadenas de texto. Por ello, habrá que hacer las conversiones adecuadas cuando el contenido a almacenar no sea de texto.

Almacenar un valor

Existen tres maneras diferentes de almacenar un valor:

• Mediante la inserción del par clave-valor:
  localStorage.setItem('clave','valor');
• Mediante la inserción de un nuevo elemento como si localStorage fuese una tabla asociativa:
  localStorage['clave'] = 'valor';
• Tratando a localStorage como un objeto:
  localStorage.clave = 'valor';

Recuperar un valor

De nuevo tenemos tres maneras diferentes de hacerlo:

• valor = localStorage.getItem('clave');
• valor = localStorage['clave'];
• valor = localStorage.clave;

Borrar uno o todos los valores almacenados

Podemos eliminar un determinado valor almacenado con localStorage.removeItem('clave');

Y podemos borrar todos los valores almacenados con localStorage.clear();

Otras operaciones

Dado que localStorage se comporta como una tabla asociativa podemos consultar cuantos elementos tenemos almacenados con
localStorage.length

También podemos obtener el nombre de una determinada clave usando localStorage.key(i), donde i es la posición en que se encuentra la clave.

Con este método, si nos interesa, podemos recorrer todos los elementos almacenados en localStorage. Por ejemplo, con este código escribimos todas las claves y sus valores correspondientes.

for (var i=0; i < localStorage.length; i++) {
        document.write("La clave "+localStorage.key(i)+" almacena el valor "+localStorage[localStorage.key(i)]);
}

Ver las claves localStorage almacenadas en mi navegador

Al menos en Chrome, Firefox y Safari, podemos consultar los datos guardados con localStorage. A continuación podemos ver como hacerlo con Chrome y Firefox.

Chrome

Para ver las claves localStorage almacenadas por una determinada página web en Chrome:

• En Windows vamos al menú, seleccionamos Herramientas y Herramientas para desarrolladores.
• En Mac vamos al menú, Ver, Opciones para desarrolladores y Herramientas para desarrolladores.

Una vez tenemos la ventana Herramientas para desarrolladores escogemos la pestaña Resources, clicamos en Local Storage y, en el desplegable, seleccionamos la página web actual.

Firefox

Para ver las claves localStorage almacenadas por una determinada página web en Firefox se hace de la misma manera tanto en Windows como en Mac:

• Vamos al menú, seleccionamos Herramientas, Desarrollador web y Consola web Herramientas para desarrolladores.

Una vez tenemos la ventana Herramientas para desarrolladores escogemos la pestaña Consola, escribimos localStorage y clicamos en el enlace [object Storage]. A la derecha se nos abrirá una barra lateral donde aparecerán los datos almacenados.

Guardar datos complejos

Aunque en localStorage solo podemos guardar cadenas de texto, podemos, usando JSON, guardar objetos, tablas, o cualquier valor almacenable en variables de JavaScript, usando JSON.stringify(valor) para codificar el objeto a guardar y JSON.parse(valor) para descodificarlo.

Por ejemplo, si tenemos una tabla a y queremos almacenarla:

    var a = [24,35,43,22,19];
    localStorage.a = JSON.stringify(a);

Y para recuperarla:

    var a = JSON.parse(localStorage.a);

Compatibilidad

En estos momentos Session Storage y Local Storage son soportados por las versiones actuales de los principales navegadores de escritorio y por casi todos los navegadores de dispositivos. En los dispositivos móviles solo Opera Mini no los soporta. Y en el escritorio IE 7 tampoco.

Puede consultarse una lista de navegadores que los soportan en http://caniuse.com/#search=localstorage

Un par de ejemplos

Para ver mejor el funcionamiento de localStorage y sessionStorage hemos preparado un par de ejemplos.

El primero se encuentra en http://multimedia.uoc.edu/programacio/prueba1.html. En él se crean 5 variables y se pueden modificar (mediante un botón) o borrar. Es ideal para probarlo con Chrome y ver como varían los datos almacenados en el espacio Resource de las Herramientas para desarrolladores. Ojo: los contenidos de los pares clave-valor deben refrescarse manualmente.

El segundo está en http://multimedia.uoc.edu/programacio/localStorage.html y está pensado para que se pueda comprobar el funcionamiento de sessionStorage. En este caso, pueden cambiarse las propiedades CSS de la página y comprobar que al recargar la página tan solo se pierde el cambio de tipografía. Y si se cierra la pestaña y se vuelve a cargar la página, se mantiene el color de fondo y el contador, pero no la tipografía o el color del texto.

(Imagen de portada obtenida de la Wikipedia)

Cita recomendada: CASADO MARTÍNEZ, Carlos. Web Storage. Mosaic [en línea], febrero 2014, no. 115. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n115.1406.