trisquel

Aprende JavaScript con ejemplos (XXVIII). El almacenamiento local.

Como ya hemos hablado en entregas anteriores (cookies), el almacenamiento en el lado del cliente solamente es posible a través de cookies pero esto no es así tras aparecer HTML5.

HTML5 pensó con buen criterio que el navegador puede almacenar mucha información (como mucho 5MB) y de esa manera no sobrecargar el servidor enviando y recibiendo datos.

Se supone que dentro de un dominio y un protocolo, la información es compartida por todas y cada una de las páginas.

Hay que decir que no todos los navegadores soportan almacenamiento local si no están en las últimas versiones. Por ejemplo chrome 4.0 o superior, IE 8.0 o superior, Firefox 3.5 o superior, Safari 4.0 o superior, …. Si tienes el navegador actualizado no tendrás problema en disfrutar de esta ventaja.

El objeto localStorage

Este objeto permite guardar y recuperar información en el navegador sin importar que sea otra sesión. Su utilización es similar a las cookies y puedes utilizarlo con los métodos:

  • setItem(clave,valor). Para guardar información. Tiene dos parámetros que son la clave y el valor.
  • getItem(clave). Para recuperar información. Habrá que especificar la clave para poder recuperar el valor de la misma.

Veamos un ejemplo de utilización de almacenamiento local con el objeto localStorage:

<!DOCTYPE html>
<html>
<body>

<script>
localStorage.setItem("usuario", "Dimas");
alert( localStorage.getItem("usuario"));
</script>

</body>
</html>

Ejercicio 28.1:
Ejecuta el código anterior y comprueba que funciona.
Ejercicio 28.2:
Utilizando el objeto localStorage realiza un programa que muestre si es la primera vez que accedes a la página web y segundo si en el día de hoy es la primera vez.

Para eliminar un dato de nuestro almacenamiento local utilizaremos el siguiente método:

  • localStorage.removeItem(clave);
Ejercicio 28.3:
Necesitamos comprobar el número de veces que un usuario hace click en un botón de nuestra página web. Realiza una web que contabilice este hecho.
¿Y si solamente necesitamos que los datos se guarden durante la sesión y no de forma permanente?
No hay problema HTML5 ya ha previsto esto y ha creado el objeto sessionStorage. Se utiliza de la misma manera que localStorage pero con la particularidad que los datos solamente se almacenarán durante la sesión.
Ejercicio 28.4:
Reescribe el ejercicio 3 pero con la restricción que queremos que los datos solamente se almacenen durante la sesión. Después de esto deberán desaparecer.
Comprueba este hecho.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>