Cada día utilizamos más LocalStorage para almacenar datos de forma local en nuestro navegador . Recordemos que es una de las características de HTML5 con una mayor soporte . Sin embargo tiene algunas limitaciones , únicamente almacena cadenas de texto .
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
localStorage["nombre"] = "cecilio";
console.log(localStorage["nombre"]);
});
</script>
</head>
<body>
</body>
</html>
Este código almacena el nombre de “cecilio” en el LocalStorage para luego leerlo y presentarlo por la consola.
Si queremos almacenar objetos de JavaScript la situación se complica ya que el localStorage únicamente soporta cadenas . Para solventarlo deberemos utilizar los métoods JSON.parse y JSON.stringify del API de JavaScript algo que no es muy cómodo.
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript" src="lockr.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
localStorage["persona"]=JSON.stringify({nombre:"cecilio",apellidos:"alvarez"});
console.dir(JSON.parse(localStorage["persona"]));
});
</script>
</head>
<body>
</body>
</html>
Lockr es una de las muchas micro librerías orientadas a simplificar la gestión el web storage permitiendonos trabajar con objetos de forma natural , ocupando 4 kb.
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript" src="lockr.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
Lockr.set('usuario',{nombre: 'cecilio', apellidos: 18});
console.dir(Lockr.get("usuario").nombre);
});
</script>
</head>
<body>
</body>
</html>
Hemos añadido la librería y usado sus métodos get/set para asignar un objeto complejo en el web storage y luego recuperarlo , el resultado imprimirá el nombre de la persona por consola.
Lockr realiza las tareas de Wrapper o coraza sobre el API de Javascript
Cada día existen más microlibrerias en JavaScript que nos pueden evitar mucho trabajo, intentemos usarlas siempre que nos sea posible y no perdamos el tiempo desarrollando nuestras propias soluciones. La comunidad ya ha pensado en ello.
Otros artículos relacionados : LocalStorage y LoDash , HTML Data Atributos
Tan facíl como reemplazar, localStorage, por sessionStorage y la lib cambia de guardar en local por la session.
saludos y gracias.
de nada 🙂