LocalStorage-Daten in "Start/Stopp" -Timer abrufen

Question

Ich versuche localStorage Daten in einem Start/Stop Timer abzurufen. Mein Ziel ist es, den Timer automatisch beim Laden der Seite zu starten, aber wenn der Benutzer verlässt und zu einem späteren Zeitpunkt (Seitenaktualisierung) zurückkehrt, wird der Timer dort weitermachen, wo er aufgehört hat.

Ich bin kurz davor, dies zur Arbeit ... aber nach jeder Seite zu aktualisieren beginnt es wieder auf 00:00:00.

Ich erstellte eine setTimeout Funktion mit 3 Sekunden Verzögerung, um zu veranschaulichen, dass einige davon funktioniert.

Vielen Dank an alle, die mir helfen können, mich auf den richtigen Weg zu bringen.

Codepen

---

HTML

<!-- Timer --> 
<div class="time-wrapper"> 
    <strong>Time</strong> 
    <span id="time-total">00:00:00</span> 
</div> 

<!-- Controls --> 
<div class="button-wrapper"> 
    <button id="start-timer" class="button">Start</button> 
    <button id="pause-timer" class="button">Pause</button> 
</div> 

JS(mit EasyTimer.js Plugin)

/* Create Timer 
********************************/ 
var timer = new Timer(); 

var timeTotal = $('#time-total'), 
    timeKey = 'time_stored', 
    timeStored = localStorage.getItem(timeKey); 

// Update Event 
timer.addEventListener('secondsUpdated', function (e) { 
    $(timeTotal).html(timer.getTimeValues().toString()); 
}); 

// Started Event 
timer.addEventListener('started', function (e) { 
    $(timeTotal).html(timer.getTimeValues().toString()); 
}); 

// Start Timer 
$('#start-timer').click(function() { timer.start(); }); 
$('#pause-timer').click(function() { timer.pause(); }); 

/* When page loads 
********************************/ 
$(document).ready(function() { 

    setInterval(function() { 
     localStorage.setItem(timeKey, timeTotal.text()); 
    }, 500); 

    if (timeStored) { 
     timeTotal.text(timeStored); 
    } 

    setTimeout(function() { 
     $('#start-timer').click(); 
     timer.start(); 
    }, 3000); 
}); 

Answer 1

Sie können den Standardwert festlegen, wenn Sie den Timer starten - siehe mein Beispiel unten. Vielleicht möchten Sie die Funktionalität der Start-Schaltfläche entsprechend anpassen, da sie auch die Methode start() des Timers aufruft. Bitte beachten Sie, dass ich einen anderen Schlüssel für Ihre localStorage verwendet habe (falls Sie bereits einen bestimmten Wert in Ihrem Browser haben) und ich speichere nur Sekunden, die jedes Mal erhöht wird, wenn das Ereignis secondsUpdated ausgelöst wird. Sie brauchen kein eigenes setInterval, da Sie das Intervall des Timers verwenden können, der mit dem oben genannten Ereignis ausgelöst wurde.

var timer = new Timer(); 

var timeTotal = $('#time-total'), 
timeKey = 'time_stored_seconds', 
timeStored = localStorage.getItem(timeKey); 

// Update Event 
timer.addEventListener('secondsUpdated', function (e) { 
    var newValue = parseInt(localStorage.getItem(timeKey) | 0)+1 
    localStorage.setItem(timeKey, newValue); 
    $(timeTotal).html(timer.getTimeValues().toString()); 
}); 

// Started Event 
timer.addEventListener('started', function (e) { 
    $(timeTotal).html(timer.getTimeValues().toString()); 
}); 

// Start Timer 
$('#start-timer').click(function() { timer.start(); }); 
$('#pause-timer').click(function() { timer.pause(); }); 

/* When page loads 
********************************/ 
$(document).ready(function() { 
    if (timeStored) { 

     timeTotal.text(timeStored); 
    }else{ 
     localStorage.setItem(timeKey, 0); 
     timeStored = 0 
    } 

    timer.start({ precision: 'seconds', startValues: {seconds: parseInt(timeStored)}}); 

});