缓存JSON响应

Question

我使用一些GeoIP服务在页面上放置国家/地区标记，具体取决于国家/地区IP。我需要为网站上的所有页面缓存JSON响应。

将此代码放入header.php：

$.getJSON('http://smart-ip.net/geoip-json?callback=?', function(data) {
  $('#flag').html("<a class='fancybox-inline int' href='#international'><img src='/images/flags/"+data.countryCode+".png'></a>");
  }

是否可以将其缓存$.ajaxSetup({ cache: true })？-似乎不起作用。

或者使用HTML5 localStorage可能更好，但是我不确定该怎么做。

我也尝试了JSONCache插件，但是对我来说不起作用。

Answer 1

您可以这样使用localStorage：

var smartIp = JSON.parse(localStorage.getItem('smartIp'));

if (!smartIp) $.getJSON('http://smart-ip.net/geoip-json?callback=?', function (data) {
    smartIp = localStorage.setItem('smartIp', JSON.stringify(data));
});

演示

因此，在您的特定情况下，应在header.php页面中使用以下代码：

var smartIp = JSON.parse(localStorage.getItem('smartIp'));

if (!smartIp) $.getJSON('http://smart-ip.net/geoip-json?callback=?', function (data) {
    smartIp = localStorage.setItem('smartIp', JSON.stringify(data));
    $('#flag').html("<a class='fancybox-inline int' href='#international'><img src='/images/flags/" + data.countryCode + ".png'></a>");
});
else $('#flag').html("<a class='fancybox-inline int' href='#international'><img src='/images/flags/" + smartIp.countryCode + ".png'></a>");