martes, 22 de febrero de 2011

Local Storage / Cookie 2.0 en HTML5

Lo que se podían llamar Cookie 2.0 es el Local Storage utilizado en HTML5 para almacenar datos con un máximo de 5Mb. De una manera más sencilla y más segura que las cookie normales.
En este tutorial vamos a ver los siguientes puntos:
  • Comprobar si nuestro navegador soporta LocalStorage.
  • Insertar datos en LocalStorage.
  • Acceder a los datos LocalStorage.
  • Listar todo el contenido.
  • Eliminar un dato en concreto.
  • Vaciar la LocalStore entera.
Vamos hacer todo esto siguiendo pasos muy sencillos, empezaremos por el primer punto:
Comprobar si nuestro navegador soporta LocalStorage
Para comprobar si funciona en nuestro navegador lo haremos con una simple condición, que sería la siguiente:
window.onload = function(){
if(localStorage){
alert("Si tienes LocalStorage");
}else{
alert("No tienes LocalStorage");
}
}
Insertar datos en LocalStorage
Para insertar datos en LocalStorage se hace ha pares, el par está compuesto por una clave (key) que se pone en primer lugar y despues de la coma insertamos el valor (dato). En este ejemplo vamos a insertar dos datos, el nombre de usuario y el més:
localStorage.setItem("usuario","Pepito");
localStorage.setItem("mes","febrero"); 
Acceder a los datos LocalStorage
Para ver el contenido de LocalStorage bastará con decirle la clave (Key) y nos retornará el valor (dato) que lleva almacenado con él, el ejemplo para ver el usuario por ejemplo sería este:
localStorage.getItem("usuario")
Esta línea nos mostraría: Pepito
Listar todo el contenido
Para listar todo el contenido sería igual que en "Acceder a los datos de localStorage" pero necesitamos las claves de cada par de datos introducidos. Para sacar las claves del par de datos tenemos la función .key() donde pasaremos un número (int) y nos devolverá la clave de esa posición. Y para listar toda la lista bastará hacer un bucle For como el siguiente:
for (x=0; x<=localStorage.length-1; x++){
//conseguimos la clave de la posicion
clave = localStorage.key(x);
//conseguimos el dato através de la clave
//tendríamos que introducir algo para imprimir lo que obtenemos a continuación
localStorage.getItem(clave);
} 
Eliminar un dato en concreto
Para eliminar un Ítem en concreto simplemente necesitaremos su clave (key) y utilizaremos la siguiente función:
localStorage.removeItem("usuario"); 
Vaciar la LocalStore entera
Para vaciar toda la LocalStorage (de esa web claro) sería utilizando la funcion clear(), quedaría así:
localStorage.clear();
Espero que estos prácticos ejemplos os hayan ayudado para entender el funcionamiento de LocalStorage en HTML5. Y decir también que se puede hacer muachas más cosas, por ejemplo en vez de meter un valor se podría meter una Lista, Array, etc... Muchas Gracias!
No olviden en escribir su comentario!!!

6 comentarios:

  1. Muy buen tutorial. Y una pregunta...
    ¿cuál sería un uso 2.0 de este recurso?

    -me puedo imaginar el uso de la geolocalización, no tanto del local storage-.

    ResponderEliminar
  2. Me imagino que sería a modo de sustitución de las cookies ya que dicen que es más seguro y bastante más sencillo.
    Y para 2.0 no estoy muy seguro, creo yo que será por ejemplo para un carrito de compra arrastrando productos y añadirlos al localStorage en vez de refrescar las cookies. corregidme si me equivoco.

    Muchas gracias por comentar.

    ResponderEliminar
  3. diseño web, en este artículo comparan localstprage vs. cookies:
    http://www.analiticaweb.es/localstorage-en-html5-o-cookies-2-0/

    Lo malo de localstorage es que aún no lo tiene implementado casi ningún navegador.

    ResponderEliminar
    Respuestas
    1. Me retracto de lo último que he dicho, acabo de ver los exploradores que lo soportan y ya son bastantes.

      Eliminar