使用JQuery瀏覽器刷新后，如何保持當前數字計數？

Question

該數字計數器一直運行，直到達到一定數量為止。 值“ from”來自mysql db，每4秒鍾該數字將加1。但是此增加的數字僅是一個虛擬值，不會保存在數據庫中。

在使用localStorage重新加載瀏覽器頁面后，我試圖保持當前的數字計數，但是我沒有運氣來存儲它。 我只想在特定時間（例如每天上午9點至晚上7點）在localStorage中計數時保存數字。

編輯：有一種方法，即使沒有用戶查看頁面，計數器也會每4秒連續添加一次？ 所以數字計數器的值在每個設備中都是同步的

能否請您幫助實現這一目標？ 在不同的設備瀏覽器中同步值的更好方法是什么？ JS Cookies還是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);
    }
});

這應該保存並加載上一次計數。讓我們知道。