Local storage HTML 5

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ón.");
</script>