javascript - jQuery getJSON 每个会话只有一次

Question

我正在使用这样的代码获取当前的 Facebook 喜欢计数：

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

但是，当用户浏览页面时，请求会再次发送。有没有办法在每个会话中只获取一次数据并将获取的值保留在 HTML 元素中而无需新请求，直到用户关闭浏览器？

谢谢你的帮助！

Answer 1

是的，您可以使用HTML5 localstorage,

Below code可以帮助你，

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

阅读http://www.w3schools.com/html/html5_webstorage.asp

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

Answer 2

您可以将计数存储在 cookie 中并在请求之前检查 cookie 是否存在（如何使用 jQuery 设置/取消设置 cookie？）

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

[注：代码未经测试]

Answer 3

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