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 🙂