Question

我有这个jQuery，目前每5秒增加一个数字。我遇到的问题是它的客户端，因此每次刷新页面时它都会重置。

相反，我希望计数器能够继续，即使您不在网站上，也不管刷新页面多少次，这就是为什么我认为像PHP这样的服务器端脚本会更适合我的用例。如果没有，请另行建议。

我已经设置了一个关于我目前使用jQuery的工作小提琴：http://jsfiddle.net/f354bzy5/

PHP会重新创建包含上述要求的影响吗？

这是我使用的Jquery：

//Counter
var counter = 22000000000;
$(".count").html(counter);
  setInterval(function () {
  $(".count").html(counter);
  ++counter;
}, 5000);

Answer 1

选中 DEMO

//Counter
var counter=22000000000;
if(typeof(localStorage.getItem('counts'))!='object')
{
   counter=parseInt(localStorage.getItem('counts'));
}
setInterval(function () {
    $(".count").html(counter);
    ++counter;
    localStorage.setItem('counts',counter);
}, 1000);

突出显示 localStorage

localStorage 是存储接口的一种实现。它存储数据 no expiration date ，只能通过 JavaScript ，或清除 Browser Cache / Locally Stored Data - 不像cookie过期。

Answer 2

您可以将计数器存储在cookie中吗。

document.cookie = counter.

如果用户刷新页面，您可以从cookie获取最后一个值。

Answer 3

归结为两个简单的选择。只需选择最适合您需求的产品：

选择Cookie ：如果您希望服务器端访问计数器。请记住，默认情况下会将Cookie与请求一起发送。

选择本地存储：如果您不想每次都发送计数器以及请求，那么您应该去本地存储。

Answer 4

您可以使用localStorage执行此操作。这是我如何做到这一点。您可以根据需要进行调整。

//detecting support for localStorage.
if (window.localStorage) {

    //counterValue already exists in localStorage? Let's use that or set to zero.
    var counterValue = localStorage.counterValue || 0;

    setInterval(function() {
        //increment the counter and store updated vale in localStorage as well.
        localStorage.counterValue = ++counterValue;

        //put it in your HTML if you might
        $(".count").html(counterValue);
    }, 5000);

}

Answer 5

如何将localStorage与某些实用功能一起使用？请记住，这是一个客户端解决方案，当用户删除浏览器缓存/本地数据等时，item将被删除。

function isLocalStorage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e) {
        return false;
    }
}

function setCounter(key, val) {
    localStorage.setItem(key, val);
}

function getCounter(key) {
    return parseInt(localStorage.getItem(key), 10);
}

(function() {

    var key = "myCounter";
    var counter = isLocalStorage() && getCounter(key) || 1;
    var $placeholder = $(".count");
    $placeholder.html(counter);

    setInterval(function () {
        counter++;
        $placeholder.html(counter);
        isLocalStorage() && setCounter(key, counter);
    }, 2000);
}());

- Demo -

无论页面刷新如何，都会持续计数

5 个答案: