Как кэшировать данные avi прогноза

Question

Я использую jquery с forecast.io, чтобы получить данные о погоде в разделе администратора моего веб-сайта magento.

Я хотел бы знать, как кэшировать данные за определенное количество минут, поэтому я могу уменьшить количество выполняемых запросов данных api. Таким образом, новые данные запрашиваются только после истечения времени кеша.

<script> 
      var $j = jQuery.noConflict(); 

      $j(document).ready(function(){ 
       var apiKey = 'API KEY'; 
       //Go to forecast.io get your free API Key 
       var curl = 'https://api.forecast.io/forecast/'; 
       var lati = 37.8267; 
       var longi = -122.423; 
       var data; 
       $j.ajax({ 
        type: "GET", 
        url: curl + apiKey +"/"+ lati +","+ longi +"?callback=?", 
        dataType: "json", 
        success: function(data){ 
         //var json = $j.parseJSON(data); 
         console.log(data); 
         $j("#currentTemperature").append(Math.floor(data.currently.temperature)); 
         $j("#currentTime").append(Date(data.currently.time)); 
         if(data.currently.icon == 'clear-day') { $j("#clear-day").css("display", "block")}; 
         if(data.currently.icon == 'clear-night') { $j("#clear-night").css("display", "block")}; 
         if(data.currently.icon == 'rain') { $j("#rain").css("display", "block")}; 
         if(data.currently.icon == 'snow') { $j("#snow").css("display", "block")}; 
         if(data.currently.icon == 'sleet') { $j("#sleet").css("display", "block")}; 
         if(data.currently.icon == 'wind') { $j("#wind").css("display", "block")}; 
         if(data.currently.icon == 'fog') { $j("#fog").css("display", "block")}; 
         if(data.currently.icon == 'cloudy') { $j("#cloudy").css("display", "block")}; 
         if(data.currently.icon == 'partly-cloudy-day') { $j("#partly-cloudy-day").css("display", "block")}; 
         if(data.currently.icon == 'partly-cloudy-night') { $j("#partly-cloudy-night").css("display", "block")}; 
         if(data.currently.icon == 'hail') { $j(".currentIcon").css("display", "block")}; 
         if(data.currently.icon == 'thunderstorm') { $j(".currentIcon").css("display", "block")}; 
         if(data.currently.icon == 'tornado') { $j(".currentIcon").css("display", "block")}; 


         $j("#humidity").append(data.currently.humidity); 
         $j("#currentWind").append(data.currently.windSpeed); 
         $j("#hourlySummary").append(data.hourly.summary); 
         $j("#currentSummary").append(data.currently.summary); 
         $j("#daily_summary").append(data.daily.summary); 
         $j("weekly").append(data.daily.data[0].apparentTemperatureMax); 
        }, 
        error: function() { 
         alert("An error occurred"); 
        } 


       }); 
      }); 
     </script> 
     <div class="weather-widget"> 
      <h4 class="wwl-title">Place</h4> 
      <div class="row"> 
       <figure class="icons"> 
        <canvas id="clear-day" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="clear-night" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="partly-cloudy-day" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="partly-cloudy-night" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="cloudy" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="rain" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="sleet" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="snow" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="wind" width="140" height="140" style="display: none;"> 
        </canvas> 

        <canvas id="fog" width="140" height="140" style="display: none;"> 
        </canvas> 

       </figure> 
       <div class="temp-feed"> 
        <h1 class="temp"><span id="currentTemperature"></span><i class=" wi wi-fahrenheit"></i></h1> 
        <div class="summdetail"> 
         <small id="currentSummary"></small></br> 
         <span id="currentWind" class=" wi wi-strong-wind"></span><span>mph</span></br> 
         <span id="dayIcon"></span> 
        </div> 
       </div> 
      </div><!-- /.row --> 
     </div> 

Может кто-нибудь посоветует мне, как это сделать?

Answer 1

Вы получаете данные и присвоить его переменной:

var weather_obj = {}; 
weather.temp = data_return_from_api_call.temp; 

Присвоить все переменные, которые вы хотите сохранить в качестве членов, как я сделал выше темп. Вы используете этот объект в вашем коде, который нуждается в данных.

При запуске страницы вы запускаете таймер.

setInterval(function(){ alert("Hello"); }, 3000); 

Где 'alert ("Hello")', вы пишете свой код, который извлекает данные. Это устанавливает таймер, который будет запускать эту функцию с установленными интервалами, в примере каждые 3000 миллисекунд или 3 секунды. Это обновляет значения в вашем объекте каждые несколько секунд, которые, по вашему мнению, подходят. Он будет продолжать запускать этот таймер до тех пор, пока страница будет открыта на рабочем столе.