Wie behalte ich die aktuelle Anzahl nach der Aktualisierung des Browsers mit JQuery?

Question

Dieser Nummernzähler läuft kontinuierlich, bis er die bestimmte Nummer erreicht. Der Wert "from" stammt von der mysql db und alle 4 Sekunden wird die Zahl 1 addiert. Diese hinzugefügte Zahl ist jedoch nur ein Dummy und wird nicht in der Datenbank gespeichert.

Ich versuche, die aktuelle Anzahl zu halten, nachdem ich die Browserseite mit localStorage neu geladen habe, aber ich habe kein Glück, es zu speichern. Ich möchte die Nummer speichern, während ich nur in einer bestimmten Zeit, z. Täglich von 9 bis 19 Uhr.

EDIT: gibt es eine Möglichkeit, dass der Zähler kontinuierlich alle 4 Sekunden hinzugefügt wird, selbst wenn kein Benutzer die Seite anzeigt? Der Wert des Zahlenzählers ist also ... in jedem Gerät

Können Sie bitte helfen, dies zu erreichen? Was ist der beste Weg, den Wert in verschiedenen Geräte-Browsern zu synchronisieren? JS Cookies oder 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

Ich habe nicht gesehen, jede localstorage Code, aber was Sie tun möchten, ist, wenn die Seite geladen wird wieder anstelle von current_data von 800000 + starten ....., zu überprüfen, ob der localstorage Wert ist verfügbar und verwenden Sie stattdessen.

Aktualisieren Sie die Implementierung wie so

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; 
} 

Stellen Sie den Speicherwert in Ihrem update Routine

$(".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); 
    } 
}); 

Dies sollte die letzte count.Let uns wissen, speichern und laden.