Artículos
HTML5

Acceder a la caché local del navegador con HTML5

09/Oct/2010

Una de las cosas que podemos (o vamos a poder hacer) con los navegadores, una vez que estos implementen HTML5 (y anexos) es acceder a la caché local del navegador con HTML5. De esta forma podremos almacenar información de forma persistente, a lo largo de toda la sesión de un usuario y lo mejor de todo, no será en el servidor, si no que será en el navegador. Lo cual nos va a permitir dotar de funcionalidad offline a nuestras aplicaciones.

Algunas cosas que tienes que saber de la caché local o Local Storage son:

  • Que esta tecnología viene a sustituir a las cookies en la faceta de persistir información
  • La vida de los datos durará mientras el usuario no cierre la ventana
  • El tamaño de os datos que puedes almacenar en la caché variará entre 5Mb y 10Mb
  • Que los datos se guardarán asociados al dominio

Lo primero que haremos en nuestro código será comprobar que existe el elemento localStorage, y por lo tanto tenemos acceso a la caché local. Así nos aseguramos que el navegador en el que se está ejecutando nuestro código tiene soporte para el elemento localStorage.

if (localStorage)
  // Existe la caché
else
  // No existe la caché

En el caso que exista la caché podemos acceder a ella mediante el objeto localStorage de dos formas. En un primer lugar podremos almacenar información en la caché mediante las siguientes sentencias:

localStorage.setItem("nombre","victor");
localStorage["nombre"] = "Victor";

Y para recuperar la información de la caché será muy parecido y lo realizaremos de la siguiente forma:

document.write(localStorage.getItem("nombre"));
document.write(localStorage["nombre"]);

Con estas pocas sentencias ya podremos acceder a la caché local del navegador con HTML5 y aprovechar todas las capacidades que nos ofrece.

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
4 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios