如何使用JQuery刷新瀏覽器後保持當前的數量？

Question

該號碼計數器持續運行，直到達到一定的數量。值「from」來自mysql數據庫，並且每4秒鐘將該數字加1。但是這個添加的數字只是一個虛擬數據，它不會保存在數據庫中。

我想使用localStorage重新加載瀏覽器頁面後保持當前的數字計數，但我沒有運氣來存儲它。我只想在特定時間內在localStorage中計數的同時保存號碼，例如從每天上午9點到晚上7點。

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

可以請你幫助實現這一目標嗎？在不同的設備瀏覽器中同步值的更好方法是什麼？ JS Cookie或localStorage？ Live link

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代碼，但你想要做的是，重新加載頁面，而不是從80萬開始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); 
    } 
}); 

這應該保存和載入最後count.Let我們。