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!!!