¿Cómo usar Local Storage de Javascript?

El solo hecho de hablar de HTML5 provoca pensar en infinidad de tecnologías que podemos aplicar ahora, una de esas tecnologías es Local Storage.

Local Storage nos permite almacenar hasta 5MB del lado del cliente por dominio, esto nos permite ahora hacer aplicaciones mas robustas y con mas posibilidades. ¿Recuerdan las cookies?, estas no ofrecen algo parecido, pero con el limite de 100KB, las cookies siempre fueron algo muy poco fiable.

En el Local Storage podemos guardar cualquier tipo de información, desde texto hasta multimedia, siempre y cuando no exceda los 5MB. Si se preguntan, ¿es una nueva tecnología y solo 5MB?, esto es por la seguridad del usuario, sería algo inseguro el contar con más espacio.

¿Cómo usar el Local Storage?

Como todo en HTML5, el uso no es muy complicado, de hecho es algo muy lógico de hacer, no requiere mucho conocimiento o documentación.

Nota: Estos Ejemplos usan JQuery para el manejo del contenido en las etiquetas.

¿Cómo guardar en el Local Storage?

/*Igualando la variable con el valor de la caja de texto y guardándola en localStorage*/
localStorage["Nombre"] = $("#nombre").val();

Como pueden ver, la sintaxis es simple y en una linea de código, con esto ya podemos guardar lo que sea en esa variable, como es Javascript, obviamente es compatible con todos los Frameworks.

¿Cómo leer el Local Storage?

/*Este ejemplo muestra "Hola tu_nombre como estas!"*/
$("#nombre2").text("Hola " + localStorage["Nombre"] + " como estas!");

En este ejemplo, podemos ver que con solo poner la sintaxis y entre corchetes el nombre de la variable del Local Storage, podemos obtener su valor.

Con esto y los 5MB disponibles, podemos crear aplicaciones más robustas y con más opciones, es una herramienta que podemos explotar para mejorar ciertas cosas que una aplicación con cookies no funcionaria muy bien.

Nota: A veces los 5MB no son el límite porque algunos navegadores dan más almacenamiento.