Cache JSON response

Question

I using some GeoIP service to place country flag on pages depends on country IP. And I need to cache JSON response for all pages on my site.

This code placed into 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>");
  }

Is it possible to cache it with $.ajaxSetup({ cache: true })? - seems to not work.

Or probably better to use HTML5 localStorage, but I'm not sure how to do that.

I also tried JSONCache plugin, but it did not work for me.

Answer 1

You could use localStorage like that:

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));
});

DEMO

So, in your specific case, you should use this code in your header.php page:

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() is equivalent to

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

In this form you can add additional parameters, such as cache:true, or any other $.ajax parameters you might need.