从页面上的计数器刷新 - cookie中保存值

Question

我正在尝试将计数器实现到网站中。该计数器的目的是表示该公司交付了多少石油，并用升数来计算。从代码角度来看，逻辑是每秒增加两个作为升数量的视觉表示，使该位有效。

我现在要做的是保存该值，以便在刷新中，或者当其他人访问该站点时，它会从当前值而不是原始的" start"值延续。我认为我可能需要使用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/

Answer 1

如果您说

其他人访问该网站，

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

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

Answer 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/

希望这会有所帮助。