如何使用 JQuery 在浏览器刷新后保持当前数字计数?

Question

这个数字计数器连续运行，直到达到某个数字。值"from"来自 mysql db，每 4 秒该数字将加 1。但是这个添加的数字只是一个虚拟数字，它不会保存在数据库中。

我试图在使用 localStorage 重新加载浏览器页面后保持当前的数量计数，但我没有运气存储它。我想仅在特定时间(例如每天上午 9 点到晚上 7 点)在本地存储中计数时保存数字。

编辑：有一种方法，即使没有用户查看页面，计数器也会每 4 秒连续添加一次？所以数字计数器的值是同步...在每台设备中

你能帮忙实现这一目标吗？在不同设备浏览器中同步值的更好方法是什么？JS Cookie 还是 localStorage？实时链接

var curr_date        = new Date();
var current_time     = curr_date.getTime()/1000;
var current_hour     = curr_date.getHours();
var current_minutes  = curr_date.getMinutes();
var current_seconds  = curr_date.getSeconds();
var curr_time        = current_hour + ":" + current_minutes + ":" + current_seconds;
//var initial_time = 1492681140 //1488333600; //1488326400
var initial_time     = curr_date.getTime()/1000;
var target_time      = 1512136800; //1498917600; //1498860000
var speed            = 60*60*24*12*30*7*2;
var current_data     = 800000 + (current_time - initial_time)/(target_time - initial_time) * 250000;
switch((new Date).getTime()){
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
(function($){
$.fn.countTo = function (options){
options = options || {};
return $(this).each(function (){
//set options for current element
var settings = $.extend({}, $.fn.countTo.defaults,{
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops; //how many times to update the value, and how much to increment the value on each update
//references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
//if an existing interval can be found, clear it first
if (data.interval){
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
render(value); 
function updateTimer(){
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function'){
settings.onUpdate.call(self, value);
}
if (loopCount >= loops){
//remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if(typeof(settings.onComplete) == 'function'){
settings.onComplete.call(self, value);
}
}
}
function render(value){
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
$self.html(value.toFixed(options.decimals).replace(/B(?=(?:d{3})+(?!d))/g, ' '));
}
});
};
$.fn.countTo.defaults ={
from: 0,               
to: 0,                 
speed: 400,            
refreshInterval: 1000,  
decimals: 0,           
formatter: formatter,  
onUpdate: null,       
onComplete: null       
};
function formatter(value, settings){
return value.toFixed(settings.decimals);
}
//custom formatting example
$('.count-number').data('countToOptions',{
formatter: function (value, options){
return value.toFixed(options.decimals).replace(/B(?=(?:d{3})+(?!d))/g, ',');
}
});
$('.timer').each(count); //start all the timers
function count(options){
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
if(curr_time >= '10:00:00' && curr_time <= '22:00:00'){
$('.timer').countTo({
from: current_data,
to: 1000000,                         
speed: speed,
refreshInterval: 1000,
onUpdate: function(value){
console.debug(this);
},
onComplete: function(value){
console.debug(this);
}
});
} else if(curr_time >= '22:00:01' && curr_time <= '9:59:59'){
$('.timer').countTo({
from: 800000,
to: 800000
});
}
}(jQuery));

Answer 1

我没有看到任何localstorage代码，但您要做的是，当页面再次加载时，而不是从 800000 +.....current_data开始，检查localstorage值是否可用并改用它。

像这样更新实现

var current_data = 0;
if (localStorage.getItem("myCounterValue") != undefined) {
current_data = parseFloat(localStorage.getItem("myCounterValue"));
} else {
current_data =
800000 +
(current_time - initial_time) / (target_time - initial_time) * 250000;
}

在update例程中设置存储值

$(".timer").countTo({
from: current_data,
to: 1000000,
speed: speed,
refreshInterval: 1000,
onUpdate: function (value) {
//console.debug(value);
localStorage.setItem("myCounterValue", value);
},
onComplete: function (value) {
console.debug(this);
}
});

这应该保存并加载最后一个计数。让我们知道。