Simplificando LocalStorage con Lockr

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

Descargar PDF