ページの更新時にカウンタから値を保存する - Cookie？

Question

私はウェブサイトにカウンタを実装しようとしています。このカウンターの目的は、上記の会社によってどのくらいの油が供給されているかを表し、リットルでカウントアップすることです。コード上、ロジックはリットルの量を視覚的に表現するために毎秒2つを追加することです。このビットは機能しています。

私が今しようとしているのは、リフレッシュ時や他の誰かがサイトを訪問したときに、元の「開始」値ではなく現在の値から継続するようにその値を保存することです。私はクッキーを使用する必要があるかもしれないと思うが、私は自分自身でこれを行う方法に固執している、任意のアイデア？

参考までに私のコードを含めました。ありがとうございます！

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

あなたは

他の誰かの訪問サイトを言うようであれば、

これはあなたのことを、あなたが実現するために必要な正確な場所ですこの情報をサーバー側に格納する必要があります。

これを行う必要があるのが1人のユーザーの場合は、localStorageを選択してください。

Answer 2

クッキーを使用すると、すべてのクライアントに異なる数のリットルが表示されます。 これにアプローチする最善の方法は、特定の時刻に値を記録してから、増分間隔を知っていれば、その日付以降の差分を計算することです。

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/

この情報がお役に立てば幸いです。