La combinación de HTML5 con librerías de Javascript suele ser una combinación ganadora y que aporta una gran flexibilidad .Muchas veces podemos necesitar trabajar con datos de forma local y hacer diversos filtros y operaciones sobre ellos. Es muy habitual trabajar con LocalStorage HTML5 y por ejemplo LowDash para realizar operaciones a nivel local, vamos a ver un ejemplo clásico. Para ello vamos a almacenar una estructura JSON en un LocalStorage usando JSON.stringify().
Vamos a verlo en código a través del botón de salvar:
<html> <head> <script src="jquery-1.11.1.js" type="text/javascript"></script> <script src="jquery-1.11.1.js" type="text/javascript"></script> <script type="text/javascript" src="lowdash.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("#salvar").click(function() { var lista={"personas": [ { "nombre": "pedro", "apellidos": "perez" }, { "nombre": "ana", "apellidos": "gomez" }, { "nombre": "david", "apellidos": "gonzalez" }, { "nombre": "maria", "apellidos": "gomez" }, ] } sessionStorage["personas"]= JSON.stringify(lista); }); $("#ordenar").click(function() { var personas= JSON.parse(sessionStorage["personas"]); console.log(personas.personas); var resultado=_.sortBy(personas.personas,'nombre'); console.log(resultado); }); }); </script> </head> <body> <input type="button" id="salvar" value="salvar"/> <input type="button" id="ordenar" value="ordenar"/> </body> </html>El botón de salvar almacena los datos en el LocalStorage.
En cambio el botón de ordenar leerá los datos que se encuentran almacenados en el LocalStorage y utilizando LowDash y el método sortBy los imprimirá por la consola ordenados.
De esta forma podemos reducir las peticiones al servidor y almacenar los datos de forma local y trabajar con ellos.
Otros artículos relacionados: Utilizando Underscore.js , Ajax métodos globales ,JQuery find vs filter
