jquery - 缓存 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>");

Answer 2

$.getJSON()相当于

$.ajax({
  dataType: "json",
  url: 'http://smart-ip.net/geoip-json/ip_address',
  data: data,
  success: function(data){ // do something here }
});

在此表单中，您可以添加其他参数，例如cache:true，或您可能需要的任何其他 $.ajax 参数。