{"id":1148,"date":"2017-11-02T15:10:37","date_gmt":"2017-11-02T15:10:37","guid":{"rendered":"http:\/\/maquetando.com\/?p=1148"},"modified":"2017-11-02T15:24:03","modified_gmt":"2017-11-02T15:24:03","slug":"5-librerias-actuales-para-manejar-datos-del-lado-del-cliente","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/5-librerias-actuales-para-manejar-datos-del-lado-del-cliente\/","title":{"rendered":"5 librerias  para manejar datos del lado del cliente con HTML5"},"content":{"rendered":"<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2017\/11\/localstorage-feature.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1150\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2017\/11\/localstorage-feature.png\" alt=\"\" width=\"760\" height=\"288\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/11\/localstorage-feature.png 760w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/11\/localstorage-feature-600x227.png 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2017\/11\/localstorage-feature-300x114.png 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/a><\/p>\n<p>Durante el \u00faltimo a\u00f1o m\u00e1s o menos me he encontrado con bastantes herramientas y bibliotecas que usan la API de LocalStorage, as\u00ed que he compilado\u00a03 de ellas en este post con algunos ejemplos de c\u00f3digo y una peque\u00f1a introducci\u00f3n a sus caracter\u00edsticas.<\/p>\n<h2><a href=\"https:\/\/github.com\/arokor\/barn\">Barnjs<\/a><\/h2>\n<p>Esta librer\u00eda proporciona una API similar a Redis con una \u00abcapa de almacenamiento at\u00f3mico r\u00e1pido y persistente\u00bb\u00a0mucho mejor que el de\u00a0localStorage. Abajo hay un fragmento de c\u00f3digo de ejemplo tomado del README del repo. Demuestra muchos de los m\u00e9todos disponibles y su f\u00e1cil implementaci\u00f3n.<\/p>\n<pre class=\"lang:js decode:true\">var barn = new Barn(localStorage);\r\n\r\nbarn.set('key', 'val');\r\nconsole.log(barn.get('key')); \/\/ val\r\n\r\nbarn.lpush('list', 'val1');\r\nbarn.lpush('list', 'val2');\r\nconsole.log(barn.rpop('list')); \/\/ val1\r\nconsole.log(barn.rpop('list')); \/\/ val2\r\n\r\nbarn.sadd('set', 'val1');\r\nbarn.sadd('set', 'val2');\r\nbarn.sadd('set', 'val3');\r\nconsole.log(barn.smembers('set')); \/\/ ['val1', 'val2', 'val3']\r\nbarn.srem('set', 'val3');\r\nconsole.log(barn.smembers('set')); \/\/ ['val1', 'val2']<\/pre>\n<h2><a href=\"https:\/\/github.com\/marcuswestin\/store.js\">Store.js<\/a><\/h2>\n<p>Esta es otra\u00a0herramienta\u00a0\u00a0similar a Lockr, pero esta vez proporciona un soporte m\u00e1s profundo a trav\u00e9s de las copias de seguridad. El README explica que \u00abstore. js usa localStorage cuando est\u00e1 disponible, y se remite al comportamiento userData en IE6 e IE7. Sin flash para ralentizar la carga de su p\u00e1gina. No hay cookies para engordar sus solicitudes de red.\u00bb<\/p>\n<p>La API b\u00e1sica se explica en los comentarios del siguiente <code class=\" language-javascript\"><span class=\"token comment\" spellcheck=\"true\">all keys<\/span> store<span class=\"token punctuation\">.<\/span><span class=\"token function\">clear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/p>\n<pre class=\"lang:js decode:true\">\/\/ Store 'SitePoint' in 'website'\r\nstore.set('website', 'SitePoint');\r\n\r\n\/\/ Get 'website'\r\nstore.get('website');\r\n\r\n\/\/ Remove 'website'\r\nstore.remove('website');<\/pre>\n<p>&nbsp;<\/p>\n<h2><a href=\"https:\/\/github.com\/localForage\/localForage\">localForage<\/a><\/h2>\n<p>Esta librer\u00eda, construida por Mozilla,\u00a0 ofrece una sencilla API similar a LocalStorage, pero utiliza almacenamiento as\u00edncrono a trav\u00e9s de IndexedDB o WebSQL. La API es exactamente la misma que localStorage (getItem (), setItem (), etc), excepto que su API es asincr\u00f3nica y la sintaxis requiere que se usen\u00a0 llamadas de retorno.<\/p>\n<pre class=\"lang:js decode:true \">localforage.setItem('key', 'value', function(err, value) {\r\n  console.log(value);\r\n});\r\n\r\nlocalforage.getItem('key', function(err, value) {\r\n  if (err) {\r\n    console.error('error message...');\r\n  } else {\r\n    console.log(value);\r\n  }\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<p>Algunos otros puntos en localForage:<\/p>\n<ul>\n<li>Soporta el uso de\u00a0PROMISES JavaScript<\/li>\n<li>Como otras librer\u00edas, no se limitan a almacenar cadenas de texto, sino que tambi\u00e9n se pueden establecer y obtener objetos<\/li>\n<li>Permite establecer la informaci\u00f3n de la base de datos usando un m\u00e9todo config ()<\/li>\n<\/ul>\n<h2><a href=\"https:\/\/github.com\/tsironis\/lockr\">Lockr<\/a><\/h2>\n<p>Lockr te\u00a0 permite utilizar una serie de m\u00e9todos y caracter\u00edsticas \u00fatiles. Por ejemplo, mientras que localStorage se limita a almacenar s\u00f3lo cadenas, Lockr le permite almacenar diferentes tipos de datos sin necesidad de hacer\u00a0la conversi\u00f3n:<\/p>\n<pre class=\"lang:js decode:true \">Lockr.set('website', 'SitePoint'); \/\/ string\r\nLockr.set('categories', 8); \/\/ number\r\nLockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);\r\n\/\/ object<\/pre>\n<p>&nbsp;<\/p>\n<p>Otras caracter\u00edsticas incluyen:<\/p>\n<ul>\n<li>Recuperar todos los pares clave\/valor con el m\u00e9todo Lockr.get ()<\/li>\n<li>Compilar todos los pares clave\/valor en un array con Lockr.getAll ()<\/li>\n<li>Borrar todos los pares clave\/valor memorizados con Lockr.flush ()<\/li>\n<li>Agregar\/eliminar valores bajo una tecla hash usando Lockr.sadd y Lockr. srem<\/li>\n<\/ul>\n<h2><a href=\"http:\/\/dexie.org\/\">DixieJs<\/a><\/h2>\n<p>Dixie.js es una herramienta muy ligera que nos permite almacenar datos con IndexedDB sin complicarnos la vida.<\/p>\n<p><strong>F\u00e1cil de aprender\u00a0 &#8211;<\/strong>Dexie fue escrito para ser directo y f\u00e1cil de aprender, si alguna vez haz tenido que trabajar con IndexedDB nativo, seguramente apreciar\u00e1s esta API de Dexie que gracias a su robustez nos evitara escribir lineas de codigo extra.<\/p>\n<p><strong>Bien documentada<\/strong>\u00a0&#8211; \u00bfDe qu\u00e9 sirve cualquier herramienta de desarrollo sin una gran documentaci\u00f3n? Dexie se explica a fondo, y hay ejemplos disponibles para ayudarte en el camino.<\/p>\n<p><strong>Performance\u00a0&#8211;<\/strong> Dexie tiene una actuaci\u00f3n casi nativa\u00a0, sus operaciones a granel utilizan una caracter\u00edstica rara vez utilizada en indexedDB\u00a0 para ignorar las llamadas de \u00e9xito cuando sea posible, lo que mejora el rendimiento.<\/p>\n<pre class=\"lang:js decode:true\">\/*\r\n\t|----------------------------|\r\n\t| Make a database connection |\r\n\t|----------------------------|\r\n\t*\/\r\n\r\n\tvar db = new Dexie('MyDatabase');\r\n\r\n\t\/\/ Define a schema\r\n\tdb.version(1).stores({\r\n\t\tfriends: 'name, age'\r\n\t});\r\n\r\n\r\n\t\/\/ Open the database\r\n\tdb.open().catch(function(error) {\r\n\t\talert('Uh oh : ' + error);\r\n\t});<\/pre>\n<pre class=\"lang:js decode:true\">\/*\r\n\t|-----------------------|\r\n\t| Then run some queries |\r\n\t|-----------------------|\r\n\t*\/\r\n\r\n\t\/\/ Find some old friends\r\n\tdb.friends\r\n\t\t.where('age')\r\n\t\t.above(75)\r\n\t\t.each (function (friend) {\r\n\t\t\tconsole.log (friend.name);\r\n\t\t});\r\n\r\n\t\/\/ or make a new one\r\n\tdb.friends.add({\r\n\t\tname: 'Camilla',\r\n\t\tage: 25\r\n\t});<\/pre>\n<p>Como siempre he pensado , la librer\u00eda correcta es con la que te sientas mejor para trabajar .<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Durante el \u00faltimo a\u00f1o m\u00e1s o menos me he encontrado con bastantes herramientas y bibliotecas&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1150,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,30,1],"tags":[114,115,116],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1148"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1148"}],"version-history":[{"count":5,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1148\/revisions"}],"predecessor-version":[{"id":1152,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1148\/revisions\/1152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/1150"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}