Last active
August 29, 2015 14:21
-
-
Save felipelavinz/365b363c557dd3576554 to your computer and use it in GitHub Desktop.
Caché de respuestas AJAX utilizando Promesas y LocalStorage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <title>Prueba caché AJAX con Promises y LocalStorage</title> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-24"> | |
| <div class="page-header"> | |
| <h1> | |
| Caché de respuestas AJAX | |
| <small>con Promesas y Local Storage</small> | |
| </h1> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <ul id="ajax-nav" class="nav nav-pills nav-stacked"> | |
| <li><a href="#uno" data-target="uno" data-key="dolar">Dólar</a></li> | |
| <li><a href="#dos" data-target="dos" data-key="euro">Euro</a></li> | |
| <li><a href="#tres" data-target="tres" data-key="libra_cobre">Libra de Cobre</a></li> | |
| </ul> | |
| </div> | |
| <div id="ajax-container" class="col-sm-8"> | |
| <h2>Indicadores económicos Chile.</h2> | |
| <p>Selecciona uno de los indicadores.</p> | |
| <div class="alert alert-info"> | |
| <small>Datos de <a href="http://mindicador.cl/">mindicador.cl</a>, obtenidos el 23 de Mayo 2015</small>. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> | |
| <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> | |
| <script type="text/javascript"> | |
| (function($){ | |
| /** | |
| * Tiempo de expiración de los datos, en milisegundos. | |
| * | |
| * En este caso, corresponde a 4 horas | |
| * | |
| * @type {Number} | |
| */ | |
| var expire = 1000 * 60 * 60 * 4; | |
| /** | |
| * Verificar si los datos en caché han expirado | |
| * @param {Object} data Objeto de datos locales | |
| * @return {Boolean} Verdadero si hay que refrescar los datos | |
| */ | |
| var isExpired = function( data ){ | |
| var presentTime = new Date().valueOf(); | |
| if ( ! data || ! data.timestamp ) { | |
| return true; | |
| } | |
| if ( presentTime - data.timestamp > expire ) { | |
| return true; | |
| } | |
| return false; | |
| }; | |
| /** | |
| * Obtener los datos para una consulta específica | |
| * | |
| * Siempre retorna un objeto Deferred de jQuery, que se | |
| * comportan de forma similar a una Promesa. | |
| * De este modo evitamos pasar callbacks para ejecutar | |
| * acciones con los datos. | |
| * | |
| * @param {string} key Nombre del dato que deseamos obtener | |
| * @return {jQuery.Deferred} Objeto "deferred" (tipo-promesa) | |
| */ | |
| var getData = function( key ){ | |
| var localData = JSON.parse( window.localStorage.getItem( key ) ); | |
| if ( ! localData || isExpired( localData ) ) { | |
| // jQuery envuelve la llamada AJAX como un objeto | |
| // Deferred que es similar a una promesa | |
| return $.ajax({ | |
| url: 'data-'+ key +'.json', | |
| dataType: 'json', | |
| type: 'GET', | |
| cache: false | |
| }).done(function(value){ | |
| // ya se resolvió la promesa, retorno datos | |
| return saveData( key, value ); | |
| }); | |
| } else { | |
| // Creo un objeto de Deferred que se resuelve | |
| // con los datos obtenidos desde localStorage | |
| var promise = new $.Deferred(); | |
| promise.resolve( localData.content ); | |
| return promise; | |
| } | |
| }; | |
| /** | |
| * Guardar los datos en localStorage | |
| * | |
| * Para controlar la expiración de los datos, siempre | |
| * vamos a añadir un timestamp. | |
| * | |
| * @param {string} key Nombre del indicador | |
| * @param {object} value Datos de la API | |
| * @return {object} Datos de la API | |
| */ | |
| var saveData = function( key, value ){ | |
| var timestamp = new Date().valueOf(); | |
| var itemData = JSON.stringify({ | |
| timestamp: timestamp, | |
| content: value | |
| }); | |
| window.localStorage.setItem( key, itemData ); | |
| return value; | |
| }; | |
| /** | |
| * Construye una visualización a partir de los datos | |
| * @param {object} data Datos de la API | |
| * @return {string} HTML con visualización | |
| */ | |
| var buildDataTable = function( data ){ | |
| var out = '<table class="table table-striped">'; | |
| out += '<caption>'; | |
| out += data.nombre; | |
| out += '</caption>'; | |
| out += '<thead>'; | |
| out += '<tr>'; | |
| out += '<th>Fecha</th>'; | |
| out += '<th>Valor</th>'; | |
| out += '</tr>'; | |
| out += '</thead>'; | |
| out += '<tbody>'; | |
| data.serie.forEach(function(fila){ | |
| out += '<tr>'; | |
| out += '<td>'+ fila.fecha +'</td>'; | |
| out += '<td>'+ fila.valor +' '+ data.unidad_medida +'</td>'; | |
| out += '</tr>'; | |
| }); | |
| out += '</tbody>'; | |
| out += '</table>'; | |
| return out; | |
| }; | |
| $(document).ready(function(){ | |
| $('#ajax-nav').on('click', 'a', function(event){ | |
| $('#ajax-nav').find('li.active').removeClass('active'); | |
| $(this).parent().addClass('active'); | |
| var indicador = $(this).data('key'); | |
| var target = $( '#' + $(this).data('target') ); | |
| var data = getData( indicador ); | |
| // Siempre voy a tener como resultado una Promesa | |
| // y puedo hacer algo con esos datos luego de obtenerlos | |
| data.then(function(value){ | |
| $('#ajax-container').html( buildDataTable( value ) ); | |
| }); | |
| }); | |
| }); | |
| })(jQuery); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "1.3.6", | |
| "autor": "mindicador.cl", | |
| "codigo": "dolar", | |
| "nombre": "Dólar observado", | |
| "unidad_medida": "Pesos", | |
| "serie": [ | |
| { | |
| "fecha": "2015-05-22T04:00:00.000Z", | |
| "valor": 605.41 | |
| }, | |
| { | |
| "fecha": "2015-05-20T04:00:00.000Z", | |
| "valor": 603.09 | |
| }, | |
| { | |
| "fecha": "2015-05-19T04:00:00.000Z", | |
| "valor": 599.06 | |
| }, | |
| { | |
| "fecha": "2015-05-18T04:00:00.000Z", | |
| "valor": 597.1 | |
| }, | |
| { | |
| "fecha": "2015-05-15T04:00:00.000Z", | |
| "valor": 598.4 | |
| }, | |
| { | |
| "fecha": "2015-05-14T04:00:00.000Z", | |
| "valor": 600.5 | |
| }, | |
| { | |
| "fecha": "2015-05-13T04:00:00.000Z", | |
| "valor": 607.31 | |
| }, | |
| { | |
| "fecha": "2015-05-12T04:00:00.000Z", | |
| "valor": 606.92 | |
| }, | |
| { | |
| "fecha": "2015-05-11T04:00:00.000Z", | |
| "valor": 605.77 | |
| }, | |
| { | |
| "fecha": "2015-05-08T04:00:00.000Z", | |
| "valor": 610.61 | |
| }, | |
| { | |
| "fecha": "2015-05-07T04:00:00.000Z", | |
| "valor": 608.84 | |
| }, | |
| { | |
| "fecha": "2015-05-06T04:00:00.000Z", | |
| "valor": 611.89 | |
| }, | |
| { | |
| "fecha": "2015-05-05T04:00:00.000Z", | |
| "valor": 614.48 | |
| }, | |
| { | |
| "fecha": "2015-05-04T04:00:00.000Z", | |
| "valor": 611.28 | |
| }, | |
| { | |
| "fecha": "2015-04-23T04:00:00.000Z", | |
| "valor": 618.02 | |
| }, | |
| { | |
| "fecha": "2015-04-22T04:00:00.000Z", | |
| "valor": 616.42 | |
| }, | |
| { | |
| "fecha": "2015-04-21T04:00:00.000Z", | |
| "valor": 615.42 | |
| }, | |
| { | |
| "fecha": "2015-04-20T04:00:00.000Z", | |
| "valor": 612.73 | |
| }, | |
| { | |
| "fecha": "2015-04-17T04:00:00.000Z", | |
| "valor": 612.3 | |
| }, | |
| { | |
| "fecha": "2015-04-16T04:00:00.000Z", | |
| "valor": 616.7 | |
| }, | |
| { | |
| "fecha": "2015-04-15T04:00:00.000Z", | |
| "valor": 614.06 | |
| }, | |
| { | |
| "fecha": "2015-04-14T04:00:00.000Z", | |
| "valor": 621.1 | |
| }, | |
| { | |
| "fecha": "2015-04-13T04:00:00.000Z", | |
| "valor": 619.42 | |
| }, | |
| { | |
| "fecha": "2015-04-10T04:00:00.000Z", | |
| "valor": 613.91 | |
| }, | |
| { | |
| "fecha": "2015-04-09T04:00:00.000Z", | |
| "valor": 611.05 | |
| }, | |
| { | |
| "fecha": "2015-04-08T04:00:00.000Z", | |
| "valor": 611.01 | |
| }, | |
| { | |
| "fecha": "2015-04-07T04:00:00.000Z", | |
| "valor": 610.74 | |
| }, | |
| { | |
| "fecha": "2015-04-06T04:00:00.000Z", | |
| "valor": 614.77 | |
| }, | |
| { | |
| "fecha": "2015-04-02T04:00:00.000Z", | |
| "valor": 618.22 | |
| }, | |
| { | |
| "fecha": "2015-04-01T04:00:00.000Z", | |
| "valor": 626.58 | |
| }, | |
| { | |
| "fecha": "2015-03-23T04:00:00.000Z", | |
| "valor": 635.62 | |
| } | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "1.3.6", | |
| "autor": "mindicador.cl", | |
| "codigo": "euro", | |
| "nombre": "Euro", | |
| "unidad_medida": "Pesos", | |
| "serie": [ | |
| { | |
| "fecha": "2015-05-22T04:00:00.000Z", | |
| "valor": 671.86 | |
| }, | |
| { | |
| "fecha": "2015-05-20T04:00:00.000Z", | |
| "valor": 671.67 | |
| }, | |
| { | |
| "fecha": "2015-05-19T04:00:00.000Z", | |
| "valor": 679.82 | |
| }, | |
| { | |
| "fecha": "2015-05-18T04:00:00.000Z", | |
| "valor": 683.18 | |
| }, | |
| { | |
| "fecha": "2015-05-15T04:00:00.000Z", | |
| "valor": 680.85 | |
| }, | |
| { | |
| "fecha": "2015-05-14T04:00:00.000Z", | |
| "valor": 682.77 | |
| }, | |
| { | |
| "fecha": "2015-05-13T04:00:00.000Z", | |
| "valor": 682.06 | |
| }, | |
| { | |
| "fecha": "2015-05-12T04:00:00.000Z", | |
| "valor": 676.99 | |
| }, | |
| { | |
| "fecha": "2015-05-11T04:00:00.000Z", | |
| "valor": 680.03 | |
| }, | |
| { | |
| "fecha": "2015-05-08T04:00:00.000Z", | |
| "valor": 687.62 | |
| }, | |
| { | |
| "fecha": "2015-05-07T04:00:00.000Z", | |
| "valor": 690.14 | |
| }, | |
| { | |
| "fecha": "2015-05-06T04:00:00.000Z", | |
| "valor": 684.9 | |
| }, | |
| { | |
| "fecha": "2015-05-05T04:00:00.000Z", | |
| "valor": 685.73 | |
| }, | |
| { | |
| "fecha": "2015-05-04T04:00:00.000Z", | |
| "valor": 684.6 | |
| }, | |
| { | |
| "fecha": "2015-04-23T04:00:00.000Z", | |
| "valor": 663.47 | |
| }, | |
| { | |
| "fecha": "2015-04-22T04:00:00.000Z", | |
| "valor": 662.03 | |
| }, | |
| { | |
| "fecha": "2015-04-21T04:00:00.000Z", | |
| "valor": 660.75 | |
| }, | |
| { | |
| "fecha": "2015-04-20T04:00:00.000Z", | |
| "valor": 661.05 | |
| }, | |
| { | |
| "fecha": "2015-04-17T04:00:00.000Z", | |
| "valor": 658.39 | |
| }, | |
| { | |
| "fecha": "2015-04-16T04:00:00.000Z", | |
| "valor": 658.94 | |
| }, | |
| { | |
| "fecha": "2015-04-15T04:00:00.000Z", | |
| "valor": 655.14 | |
| }, | |
| { | |
| "fecha": "2015-04-14T04:00:00.000Z", | |
| "valor": 656.69 | |
| }, | |
| { | |
| "fecha": "2015-04-13T04:00:00.000Z", | |
| "valor": 655.61 | |
| }, | |
| { | |
| "fecha": "2015-04-10T04:00:00.000Z", | |
| "valor": 654.42 | |
| }, | |
| { | |
| "fecha": "2015-04-09T04:00:00.000Z", | |
| "valor": 660.88 | |
| }, | |
| { | |
| "fecha": "2015-04-08T04:00:00.000Z", | |
| "valor": 662.49 | |
| }, | |
| { | |
| "fecha": "2015-04-07T04:00:00.000Z", | |
| "valor": 671.14 | |
| }, | |
| { | |
| "fecha": "2015-04-06T04:00:00.000Z", | |
| "valor": 669.25 | |
| }, | |
| { | |
| "fecha": "2015-04-02T04:00:00.000Z", | |
| "valor": 666.04 | |
| }, | |
| { | |
| "fecha": "2015-04-01T04:00:00.000Z", | |
| "valor": 672.73 | |
| }, | |
| { | |
| "fecha": "2015-03-23T04:00:00.000Z", | |
| "valor": 690.44 | |
| } | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "1.3.6", | |
| "autor": "mindicador.cl", | |
| "codigo": "libra_cobre", | |
| "nombre": "Libra de Cobre", | |
| "unidad_medida": "Dólar", | |
| "serie": [ | |
| { | |
| "fecha": "2015-05-22T04:00:00.000Z", | |
| "valor": 2.82 | |
| }, | |
| { | |
| "fecha": "2015-05-20T04:00:00.000Z", | |
| "valor": 2.89 | |
| }, | |
| { | |
| "fecha": "2015-05-19T04:00:00.000Z", | |
| "valor": 2.91 | |
| }, | |
| { | |
| "fecha": "2015-05-18T04:00:00.000Z", | |
| "valor": 2.91 | |
| }, | |
| { | |
| "fecha": "2015-05-15T04:00:00.000Z", | |
| "valor": 2.91 | |
| }, | |
| { | |
| "fecha": "2015-05-14T04:00:00.000Z", | |
| "valor": 2.92 | |
| }, | |
| { | |
| "fecha": "2015-05-12T04:00:00.000Z", | |
| "valor": 2.9 | |
| }, | |
| { | |
| "fecha": "2015-05-08T04:00:00.000Z", | |
| "valor": 2.9 | |
| }, | |
| { | |
| "fecha": "2015-05-07T04:00:00.000Z", | |
| "valor": 2.94 | |
| }, | |
| { | |
| "fecha": "2015-05-06T04:00:00.000Z", | |
| "valor": 2.91 | |
| }, | |
| { | |
| "fecha": "2015-05-04T04:00:00.000Z", | |
| "valor": 2.8 | |
| }, | |
| { | |
| "fecha": "2015-04-23T04:00:00.000Z", | |
| "valor": 2.7 | |
| }, | |
| { | |
| "fecha": "2015-04-22T04:00:00.000Z", | |
| "valor": 2.72 | |
| }, | |
| { | |
| "fecha": "2015-04-21T04:00:00.000Z", | |
| "valor": 2.75 | |
| }, | |
| { | |
| "fecha": "2015-04-20T04:00:00.000Z", | |
| "valor": 2.75 | |
| }, | |
| { | |
| "fecha": "2015-04-17T04:00:00.000Z", | |
| "valor": 2.7 | |
| }, | |
| { | |
| "fecha": "2015-04-16T04:00:00.000Z", | |
| "valor": 2.7 | |
| }, | |
| { | |
| "fecha": "2015-04-15T04:00:00.000Z", | |
| "valor": 2.72 | |
| }, | |
| { | |
| "fecha": "2015-04-14T04:00:00.000Z", | |
| "valor": 2.75 | |
| }, | |
| { | |
| "fecha": "2015-04-13T04:00:00.000Z", | |
| "valor": 2.73 | |
| }, | |
| { | |
| "fecha": "2015-04-10T04:00:00.000Z", | |
| "valor": 2.73 | |
| }, | |
| { | |
| "fecha": "2015-04-09T04:00:00.000Z", | |
| "valor": 2.76 | |
| }, | |
| { | |
| "fecha": "2015-04-06T04:00:00.000Z", | |
| "valor": 2.75 | |
| }, | |
| { | |
| "fecha": "2015-04-02T04:00:00.000Z", | |
| "valor": 2.75 | |
| }, | |
| { | |
| "fecha": "2015-04-01T04:00:00.000Z", | |
| "valor": 2.77 | |
| }, | |
| { | |
| "fecha": "2015-03-23T04:00:00.000Z", | |
| "valor": 2.67 | |
| }, | |
| { | |
| "fecha": "2015-03-20T04:00:00.000Z", | |
| "valor": 2.58 | |
| }, | |
| { | |
| "fecha": "2015-03-19T04:00:00.000Z", | |
| "valor": 2.63 | |
| }, | |
| { | |
| "fecha": "2015-03-18T04:00:00.000Z", | |
| "valor": 2.66 | |
| }, | |
| { | |
| "fecha": "2015-03-17T04:00:00.000Z", | |
| "valor": 2.67 | |
| }, | |
| { | |
| "fecha": "2015-03-16T04:00:00.000Z", | |
| "valor": 2.66 | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment