HTML5 Web Storage

Hoy vamos a hablar un poco sobre el Web Storage en HTML5.  Se trata de una nueva opción que permite salvar datos en el lado del cliente, a medio plazo será un sustituto natural de las cookies que hemos usado hasta ahora.

La información del Web Storage solamente puede ser accedida desde el cliente, nunca desde el servidor. A diferencia de las cookies que se mandan como cabezeras http, el Web Storage no intercambia en ningún momento información con el servidor lo que lo hace mucho más seguro y más rápido.

Existen dos tipos de almacenamiento dentro del Web Storage:

• sessionStorage: para almacenamiento temporal
• localStorage: para almacenamiento persistente

Al igual que ocurria con las cookies, la información se almacena por pares, cada clave tiene asignado un valor (key,value).

Los métodos del Web Storage son los siguientes (aunque en los ejemplos utilizaremos los abreviados):

• setItem(key,value);
• getItem(key);
• clear();
• removeItem();
• key(n);

¿Como funciona? Muy sencillo, vamos a almacenar de forma persistente el nombre del usuario y luego a mostrarlo:

localStorage.nombre="Sara";
document.getElementById("perfil").innerHTML=Su nombre: "+ localStorage.nombre;

Si quereis almacenar datos de forma algo más elaborada o extensa podeis convertir a JSON lo que deseeis almacenar:

var usuario = {
 nombre: "Sara",
 apellido: "Martinez"
};
localStorage.usuario = JSON.stringify(usuario);
usuario = JSON.parse(localStorage.usuario);</code>

Para borrar alguno de los datos almacenados

localStorage.removeItem('usuario');

El Web Storage está soportado por todos los navegadores actuales, aclaramos para IE8+. También no está de más recordar que este sistema tiene como motor a javascript, así que aquellos navegadores que no lo soporten tendrán problemas… problemática un poco orientada a los navegadores para móviles.

Toda la información la podeis encontrar el la sección HTML5 de W3C