在刷新頁面時保存計數器的值 - Cookie？

我試圖在網站中實現一個計數器。該計數器的目的是表示該公司交付的油量，並以升數計算。在代碼方面，邏輯是每秒添加兩個，作爲升數的可視化表示，得到了這一點的工作。在刷新頁面時保存計數器的值 - Cookie？

我試圖現在要做的是保存值，以便在刷新，或者當別人訪問該網站，從目前的值，而不是原來的「開始」值繼續進行。我想我可能需要使用cookies，但我已經陷入瞭如何做到這一點，有什麼想法？

我已經包含了我的代碼以供參考，謝謝大家！

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/

來源

2016-12-19 TylerSands

如果像你說的

別人訪問該網站，

這是確切的地方，在這裏你需要認識到，你必須將這些信息存儲在服務器端。

如果您只需要爲單個用戶這樣做，那麼localStorage應該是你的不二之選。

來源

2016-12-19 15:03:34 meskobalazs

現在有道理我認爲這樣，所以我只是通過AJAX每增量發送值到PHP？ – TylerSands

在這種情況下，我會使用以下方法：在加載時從服務器獲取值，然後使用當前解決方案增加它。重新加載時，再次從服務器加載值。所以基本上這兩個值可能不同步，但在這種確切的情況下並不重要。 – meskobalazs

使用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/

希望這有助於。

來源

2016-12-19 15:11:27

在刷新頁面時保存計數器的值 - Cookie？

回答

相關問題