jQuery getJSON only once per session

Question

I'm fetching the current Facebook like count with a code like this:

$(document).ready(function() {
    $.getJSON('https://graph.facebook.com/<username>?callback=?', function(data) {
        var fb_count = data['likes'].toString();
        $('#fb_count').html(fb_count);
    });
});

However, when user browses pages the request is sent again. Is there a way to fetch the data only once per session and keep the fetched value in the HTML element without a new request, until user closes the browser?

Thanks for any help!

score 2 · Accepted Answer · answered Jun 24 '13 at 04:33

2

Yes, you can do it by using HTML5 localstorage,

Below code may help you,

$(document).ready(function() {
    if(typeof(Storage)!=="undefined" && localStorage.fb_count)
    {
        $('#fb_count').html(localStorage.fb_count);
    }
    else{
        $.getJSON('https://graph.facebook.com/<username>?callback=?', function(data) {
           var fb_count = data['likes'].toString();
           $('#fb_count').html(fb_count);
           if(typeof(Storage)!=="undefined")
              localStorage.fb_count=fb_count;
        });
    }
});

Read http://www.w3schools.com/html/html5_webstorage.asp

And http://www.w3.org/TR/webstorage/

answered Jun 24 '13 at 04:33

Rohan Kumar

40,431
11
76
106

1

Should that be sessionStorage instead of localStorage as he wants the data to persist only until the browser closes – Scott Mutch Jun 24 '13 at 04:51
sessionStorage will reset before the browser closes. – Malk Jun 24 '13 at 05:12

score 1 · Answer 2 · edited May 23 '17 at 10:25

You could store the count in a cookie and check for the existence of the cookie before requesting it (How do I set/unset cookie with jQuery?)

if( $.cookie("likeCount") === null ){
   $.getJSON('https://graph.facebook.com/<username>?callback=?', function(data) {
      var fb_count = data['likes'].toString();
      $.cookie("likeCount", fb_count);
      $('#fb_count').html(fb_count);
   });
} 
else 
   $('#fb_count').html($.cookie("likeCount"));

[Note: code not tested]

Malk · Answer 3 · 2013-06-24T05:18:31.930

var _facebooker = new function() {

    var url = 'https://graph.facebook.com/<username>?callback=?',
        threshold = 3,
        sKey = "_facebooker",
        mode = (window.localStorage ? "storage" : "jcookie");


    function getData(){
       var data = {};

       if (mode === "jcookie")
          data = JSON.pase($.cookie(sKey));
       else 
          data = JSON.parse(localStorage.getItem(sKey));

       if (typeof data.expired\s == "undefined" || data.expires <= new Date())
           return getNewData();
       else
           return data;
    }

    function setData(d){
       if (mode === "jcookie")
          $.cookie(sKey, JSON.stringify(d));
       else 
          localStorage.setItem(sKey, JSON.stringify(d));
       return d;
    }

    function getNewData(){
       var data = {};
       $.getJSON(url, function(d){ 
          data = { 
              likeCount: d['likes'], 
              expires: new Date((new Date()).getTime() + threshold * 60000)
          };
          setData(data);
       });
       return data;
    }

    function getLikeCount(){
        return getData().likeCount;
    }
    return {
       "getLikeCount" : getLikeCount
    }
}



$(document).ready(function() {
     $('#fb_count').html(_facebooker.getLikeCount());
}

jQuery getJSON only once per session

3 Answers3