如何为地理定位优化jQuery.getJSON()

How to optimize jQuery.getJSON() for geolocalisation

本文关键字:jQuery getJSON 优化 定位      更新时间:2023-09-26

我使用jQuery.getJSON()来获取访问者的位置,并基于该位置显示/隐藏特定的div。因此,由于服务器api限制,我希望该请求在访问期间每个访问者只发送一次,可能使用会话或缓存在客户端存储该位置在访问期间使用;你有什么建议吗?还是一个可以使用的实现?

    <script>
    $(function () {
        $.getJSON('http://freegeoip.net/json/?callback=?', function (location, textStatus, jqXHR) {
            console.log("callback running");
            console.log(textStatus);
            console.log(jqXHR);
            var div = document.getElementById('showadsbayt');
            jQuery('#region-name').html(location.country_code );
              if (location.country_code != 'MA') {
                      div.style.display = 'none';
              }
        });
    });
</script>  

根据实现的复杂程度、应用程序有多少页面以及是否要对用户隐藏位置数据,您会想到多种选择。我将在下面简单地列出它们。

保存为全局变量

这个很明显,我只是为了完整起见把它放在这里,但如果你做的是单页应用程序,它就足够了。

将您感兴趣的位置数据部分附加为查询字符串

这可能是最简单的解决方案,如果你的应用程序有多个页面,你所需要做的就是在它们之间持久化数据。这也有向用户公开位置数据的效果,例如允许他们添加书签或与给定位置共享页面—在您的用例中可能需要也可能不需要。

使用cookie

cookie就是为了这个目的——在用户的机器上保存键值对以供以后使用。您可以简单地将位置数据保存为cookie,稍后检查该cookie是否已设置。如果是,则使用cookie中的数据,而不是进行API调用。这也会在访问之间保持,所以如果您关心用户可能更改位置的情况,则需要设置较低的过期时间或允许他们重置位置。

另外,如果你在欧盟,你需要把愚蠢的cookie法律横幅放在你的应用程序的某个地方。

使用localStorage的

和cookie一样,除了更灵活一点,在Opera Mini上不起作用。如果你的位置数据因为一些奇怪的原因而非常大,可以使用这个。

显然这也属于欧盟cookie法,所以如果你走这条路,准备好你的横幅

使用Web Storage,下面的代码将发现用户是否访问您的页面,如果没有访问ajax将发出请求,并设置expire日期,您可以在几天内更改值或设置0为永远,如果访问ajax将不会请求。

         < script >
          $(function() {
            var expire = 30; //in days ====> 0 == for ever
            if (!localStorage["visited"] || (+localStorage["visited"] <= new Date().getTime() && +localStorage["visited"] > 0)) {
              localStorage["visited"] = (+expire * 24 * 60 * 60 * 1000) + new Date().getTime();
              localStorage["visited"] = expire == 0 ? 0 : localStorage["visited"];
              $.getJSON('http://freegeoip.net/json/?callback=?', function(location, textStatus, jqXHR) {
                console.log("callback running");
                console.log(textStatus);
                console.log(jqXHR);
                var div = document.getElementById('showadsbayt');
                jQuery('#region-name').html(location.country_code);
                if (location.country_code != 'MA') {
                  div.style.display = 'none';
                }
              });
            }
          }); < /script>