HTML5 - Almacenamiento de datos en el cliente

HTML5 es un nuevo estándar para HTML, XHTML y DOM; si bien todavía está en desarrollo, la mayoría de los navegadores más usados y modernos ya lo están adoptando, aunque en casi todos el soporte es parcial.

Ya he hablado sobre algunas de las nuevas característcas del HTML5, pero otra nueva característica muy potente, que elimina las limitaciones de las tradicionales cookies y ofrece nuevas capacidades de guardar datos, son las nuevas opciones de almacenamiento de datos del lado del cliente.

EntradasRelacionados

El Internet de las Cosas revoluciona al mundo

6 reflexiones de tecnología para el día de Internet

Almacenamiento del lado del cliente (cliente-side) en HTML5

HTML 5 ofrece dos nuevos métodos para almacenar datos del lado del cliente:

localStorage: almacena datos en pares (clave,valor) y sin límite de tiempo; éstos están disponibles en su totalidad para el dominio que los solicitó.
sessionStorage: almacena datos en pares (clave,valor) y limitados en tiempo a la duración de la sesión; éstos están disponibles para todo el dominio.

Métodos de almacenamiento en HTML5

setItem(clave,valor): agrega una par (clave,valor) a objeto sessionStorage.
getItem(clave): devuelve el valor de clave pasada.
key(n): devuelva el valor para clave pasada (n).
clear(): remueve todos los pares (clave,valor) del objeto sessionStorage.
removeItem(clave): remueve un par (clave,valor) del objeto sessionStorage.

Ejemplos para los objetos sessionStorage y localStorage

Guardar con el objeto localStorage:

localStorage.setItem('mostrar_barra', 'si');

Crear y acceder a un objeto sessionStorage:

<script type="text/javascript">
 sessionStorage.lastname="Diego";
 document.write(sessionStorage.lastname);
</script>

Contar el número de visitas a la página en la sesión actual:

<script type="text/javascript">
 if (sessionStorage.pagecount)
 {
 sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
 }
else
 {
 sessionStorage.pagecount=1;
 }
 document.write("P&aacute,ginas visitadas "+sessionStorage.pagecount+" durante esta sesi&oacute;n.");
</script>