Speichern des Wertes von einem Zähler auf Seitenaktualisierung - Cookies?

Question

Ich versuche, einen Counter in eine Website zu implementieren. Der Zweck dieses Zählers ist es, darzustellen, wie viel Öl von diesem Unternehmen geliefert wird und um den Liter zu zählen. Code-weise ist die Logik, um jede Sekunde als eine visuelle Darstellung der Menge von Litern hinzuzufügen, hat dieses Bit funktioniert.

Ich versuche jetzt, diesen Wert zu speichern, so dass beim Aktualisieren oder wenn jemand anderes die Site besucht, es vom aktuellen Wert und nicht vom ursprünglichen "Start" -Wert fortgesetzt wird. Ich denke, dass ich vielleicht Cookies verwenden muss, aber ich habe mich selbst daran hängen lassen, wie das geht, irgendwelche Ideen?

Ich habe meinen Code als Referenz enthalten, danke allen!

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

Wenn, wie Sie sagen

jemand anderes die Website besucht,

dies ist der genaue Ort, an dem Sie müssen erkennen, dass Sie muss diese Informationen auf der Serverseite speichern.

Wenn Sie dies nur für einen einzelnen Benutzer tun müssen, dann sollte localStorage Ihre offensichtliche Wahl sein.

Answer 2

Die Verwendung von Cookies führt dazu, dass jeder Client eine andere Anzahl von Litern anzeigt. Der beste Weg, dies zu erreichen, wäre, den Wert zu einer bestimmten Zeit aufzuzeichnen und dann, wenn wir das Inkrement-Intervall kennen - um die Differenz seit diesem Datum zu berechnen.

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/

Hoffnung, das hilft.