如何缓存 forecast.io api 数据

Question

我正在使用带有forecast.io 的jquery 在我的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;

将所有要存储为成员的变量分配为成员，就像我在上面使用 temp 所做的那样。您在需要数据的代码中的任何地方都使用该 obj。

在页面启动时，您会启动一个计时器。

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

'alert("Hello")' 在哪里，您编写检索数据的代码。这将设置一个计时器，该计时器将以设定的时间间隔运行该函数，在示例中每 3000 毫秒或 3 秒。这会每隔多少秒更新一次您认为合适的对象中的值。只要页面在桌面上打开，它将继续运行此计时器。