保存页面刷新时计数器中的值 - cookie？答案

【问题标题】：Saving the value from a counter on page refresh - cookies?保存页面刷新时计数器中的值 - cookie？
【发布时间】：2016-12-19 15:00:19
【问题描述】：

我正在尝试在网站中实施计数器。该计数器的目的是表示该公司提供了多少油，并以升为单位进行计数。就代码而言，逻辑是每秒添加两个作为升数的视觉表示，让这个有点工作。

我现在要做的是保存该值，以便在刷新时或当其他人访问该站点时，它会从当前值而不是原始“开始”值继续。我想我可能需要使用 cookie，但我一直不知道该怎么做，有什么想法吗？

我已包含我的代码以供参考，谢谢大家！

var gaugeStart = 320000000;
var gaugePerSecond = 2;
var gaugeInterval = 500;

var gaugeCurrent = 513637030;

$(document).ready(function() {
    $('#gaugeValue').html(commafy(gaugeCurrent));

    var tick = setInterval(function() {
        gaugeCurrent += Math.ceil((gaugeInterval/1000) * gaugePerSecond);

        $('#gaugeValue').html(commafy(gaugeCurrent));
    }, gaugeInterval);
    document.cookie = gaugeCurrent;
});

function commafy( num ) {
    var str = num.toString().split('.');
    if (str[0].length >= 5) {
        str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
    }
    if (str[1] && str[1].length >= 5) {
        str[1] = str[1].replace(/(\d{3})/g, '$1 ');
    }
    return str.join('.');
}

https://jsfiddle.net/93byc54f/

【问题讨论】：

标签： javascript jquery cookies counter countdown

【解决方案1】：

如你所说

其他人访问该网站，

这是您需要意识到的确切位置，您必须在服务器端存储此信息。

如果您只需要为单个用户执行此操作，那么localStorage 应该是您的明显选择。

【讨论】：

现在我这么想是有道理的，所以我是否可以通过 AJAX 每次增量将值发送到 PHP？
在这种情况下，我将使用以下方法：在负载时从服务器获取值，然后使用您当前的解决方案增加它。重新加载时，再次从服务器加载值。所以基本上这两个值可能不同步，但在这个确切的场景中并不重要。

【解决方案2】：

使用 cookie 将导致每个客户端显示不同的升数。解决此问题的最佳方法是记录特定时间的值，然后假设我们知道增量间隔 - 计算自该日期以来的差异。

    var gaugeStart = 320000000;
var gaugePerSecond = 2;
var gaugeInterval = 500;

var gaugeCurrent = 513637030;

var now = new Date();
var then = new Date("2016-01-01 00:00:00");

var secondsSince = Math.floor((now - then) / 1000);
var gaugeAmoountSince = secondsSince*4;
gaugeCurrent += gaugeAmoountSince;

$(document).ready(function() {
    $('#gaugeValue').html(commafy(gaugeCurrent));

    var tick = setInterval(function() {
        gaugeCurrent += Math.ceil((gaugeInterval/1000) * gaugePerSecond);

        $('#gaugeValue').html(commafy(gaugeCurrent));
    }, gaugeInterval);
    document.cookie = gaugeCurrent;
});

function commafy( num ) {
    var str = num.toString().split('.');
    if (str[0].length >= 5) {
        str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
    }
    if (str[1] && str[1].length >= 5) {
        str[1] = str[1].replace(/(\d{3})/g, '$1 ');
    }
    return str.join('.');
}

https://jsfiddle.net/mb0pv4ea/

希望这会有所帮助。

【讨论】：