midato = localStorage.getItem("clave");

También podemos usar el array para recoger el dato:

midato = localStorage["clave"];

Y podemos usar también la clave como una propiedad:

midato = localStorage.clave;

Siguiendo con el ejemplo anterior podemos recuperar el dato de cualquiera de estas tres maneras:

minombre = localStorage.getItem("nombre");

minombre = localStorage["nombre"];

minombre = localStorage.nombre;

Los datos pueden recuperarse en cualquier otra página, y en cualquier otro momento, siempre que se use el mismo dispositivo (ordenador, tablet, etc).

Borrar datos

Los datos mientras no les digamos otra cosa se almacenan de forma permanente y sin fecha de caducidad, por lo que si queremos borrar algún dato debemos hacerlo de forma manual, utilizando el método removeItem() de la siguiente manera:

localStorage.removeItem("clave");

En el ejemplo anterior para borrar el dato haremos lo siguiente:

localStorage.removeItem("nombre")

Debemos pasar como argumento la clave del elemento que queremos borrar. Si la "clave" que pasamos en el argumento no existe el método simplemente no hará nada.

Datos de sesión

El almacenamiento de datos tiene también la opción de guardar los datos sólo mientras dure la sesión del usuario en su navegador. Con esta opción los datos sólo están disponibles mientras el usuario no cierre el navegador.

Al cerrar el navegador los datos se borrar y desaparecen. Mientras el navegador esté abierto los datos pueden verse en las distintas páginas de las distintas ventanas del navegador.

Para almacenar datos de sesión utilizaremos el objeto sessionStorage. Este objeto tiene los mismos métodos y propiedades que localStorage.

Por lo tanto, para guardar un nuevo dato podemos usar cualquiera de estas formas:

sessionStorage.setItem("clave","valor");

sessionStorage["clave"]="valor";

sessionStorage.clave="valor";

Para recuperar el dato podemos hacerlo de cualquiera de estas formas:

midato = sessionStorage.getItem("clave");

midato = sessionStorage["clave"];

midato = sessionStorage.clave;

También podemos borrar el dato antes de que el usuario cierre la sesión:

sessionStorage.removeItem("clave");

Los métodos y propiedades de sessionStorage son los mismos que los de localStorage. Como se ha dicho antes la diferencia entre ambos objetos es que sessionStorage borra los datos cuando el usuario cierra la sessión del navegador, mientras que con localStorage éstos se guardan de manera permanente.

Otros métodos y propiedades

Propiedad length

La propiedad length permite saber el número de datos (pares "clave/valor") que tenemos almacenados. su sintaxis es:

num = localStorage.length;

La variable num nos dice el número de datos que tenemos guardados.

Método key()

El método key() nos permite saber las claves que tenemos guardadas. Las claves se guardan en un array, por lo que como argumento pondremos el número de elemento de la clave.

clave = localStorage.key(0);

Este ejemplo nos devuelve la clave del primer elemento guardado.

Aunque este método no es muy util para buscar claves, sí que puede ser útil para ver todos los datos (pares "clave/valor") que hay guardados. Para ello utilizaremos un bucle que recorra todos los datos. La propiedad length nos dirá cuantos elementos hay guardados y el método key() nos muestra los datos. El código ser parecido a éste:

num=localStorage.length; //número de datos guardados
info=document.getElementById("lista"); //elemento donde sacar los datos en pantalla
info.innerHTML="<ul>"; //principio de lista
for (i=0;i<num;i++) { //bucle para recorrer todos los datos
   clave=localStorage.key(i); //obtener la clave del dato
   valor=localStorage.getItem(clave); //obtener el valor del dato
   info.innerHTML+="<li>"+clave+" : "+valor+"</li>"; //sacar dato en pantalla
   }
info.innerHTML+="</ul>"; //Fin de la lista

En este ejemplo hemos sacado todos los datos guardados en pantalla dentro de una lista.

Siguiendo este mismo ejemplo no nos sería difícil hacer un bucle que borrara todos los datos que tenemos almacenados. Para ello una vez obtenida la clave se le aplicaría el método removeItem(clave).

Guardar datos que no son cadenas

el sistema de almacenamiento de localStorage sólo puede guardar cadenas de texto, por lo que tenemos el problema de querer guardar otro tipo de datos como números, fechas, arrays, etc.

En este caso el navegador convertirá este dato a cadena de texto, por lo que cuando lo recojamos, debemos convertirlo al tipo de dato original para poder usarlo como tal.

Aquí acaba este manual de HTML5. HTML5 es un lenguaje relativamente nuevo y puede que haya algunos aspectos que se hayan quedado sin explicar. Hemos dejado aparte la aplicación "canvas" a la cual, por su extensión, dedicamos otro manual.

Volver a página principal