HTML5–Utilizando el LocalStorage, ejemplo práctico.
 |
Hola que tal? Como ya saben hablar HTML5 está muy de moda, entonces como hay que ponerse a tono vamos a hacer un ejemplo de la utilización del localStorage de HTML5.
Con esta funcionabilidad vamos a poder implementar un cache local en el navegador, es decir, almacenar información en el cliente de manera persistente a lo largo de la sesión de un usuario. Esta tecnología viene a sustituir las cookies, además el tamaño máximo es entre 5 a 10 Megas (Depende de cada navegador), puedes revisar esto acá:
http://arty.name/localstorage.html
y revisar el post del Master John Resig sobre el tema:
http://ejohn.org/blog/dom-storage/ |
Y también es importante remarcar que los datos van a están disponibles mientras el usuario no cierre la ventana y están asociados a un dominio.
Ahora el ejemplo, primero vamos a tener el siguiente HTML, que consiste en una lista:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<h1> Mi Lista de Tareas </h1>
<span id="mensaje"></span>
</header>
<section>
<ul id="lista" contenteditable="true">
<li></li>
</ul>
</section>
<input type="button" id="limpiar" value="Limpiar" />
</body>
</html>
Podemos observar la propiedad contenteditable=”true” que es de HTML5 y nos permite editar el elemento, de esta manera los elementos de la lista los vamos a poder ingresar desde el teclado 
Ahora la idea es que cuando el foco se salga de la lista, podamos almacenar la información de los elementos de la lista en el localStorage de manera de refrescar la página y que los datos no se pierdan (alguien recuerda el viewstate?). Veamos el código BLOCKED SCRIPT
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#limpiar").click(function(){
localStorage.removeItem('listado');
});
$("#lista").blur(function(){
localStorage.setItem('listado',$("#lista").html());
});
if (localStorage.getItem('listado')){
$("#mensaje").text("Desde el LocalStorage");
$("#lista").html(localStorage.getItem('listado'));
}else{
$("#mensaje").text("Sin datos en el LocalStorage");
}
});
</script>
Primero que nada , tenemos un botón que va a limpiar la lista, con el método removeItem podemos remover el elemento almacenado, también podemos utilizar clear() para remover todos los items dentro del LS.
Luego en el evento blur() de la lista, esto es, cuando se saca el foco, vamos a almacenar los que se ha escrito, es decir, el contenido html, para esto utilizamos el método setItem en donde especificamos el KeyName y los datos a almacenar.
El código que viene a continuación nos permite determinar si existe el elemento almacenado dentro de la cache mediante el keyname, y si es así enviamos un mensaje y al elemento lista le asignamos el la propiedad html (esto es por que ocupamos jquery si no, es innerHTML) el contenido desde el LS.
Y el resultado:
Comienzo a llenar la lista a mano, la lista es editable.
Luego al recargar la página (o al tener otro IE9 abierto y cerrar la página del ejemplo).
Y si presiono Limpiar y luego recargo:
Espero que te sirva, vi este ejemplo en un video, lo modifiqué un poco, y quería compartirlo
Nos vemos!
Saludos!
Gonzalo