Reputation: 2681
On my webpage I have a timer, it has to run all the time, but when the page refreshes the timer resets to 0. Guide me how to achieve this.
var hours =0;
var mins =0;
var seconds =0;
$('#start').click(function(){
startTimer();
});
$('#stop').click(function(){
clearTimeout(timex);
});
$('#reset').click(function(){
hours =0;
mins =0;
seconds =0;
$('#hours','#mins').html('00:');
$('#seconds').html('00');
});
function startTimer(){
timex = setTimeout(function(){
seconds++;
if(seconds >59){
seconds=0;mins++;
if(mins>59)
{
mins=0;
hours++;
if(hours <10) {
$("#hours").text('0'+hours+':');
}
else {
$("#hours").text(hours+':');
}
}
if(mins<10){
$("#mins").text('0'+mins+':');
}
else {$("#mins").text(mins+':');
}
}
if(seconds <10) {
$("#seconds").text('0'+seconds);
} else {
$("#seconds").text(seconds);
}
startTimer();
},1000);
}
#timer {
font-size:150px;
margin:0 auto;
width:1000px;
}
#controls {
margin:0 auto;
width:600px;
}
#controls button {
font-size:24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<center>
<div id="timer">
<span id="hours">00:</span>
<span id="mins">00:</span>
<span id="seconds">00</span>
</div>
<div id="controls">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</center>
Thanks in advance...!
Upvotes: 1
Views: 44
Reputation: 2681
Finally, I found a solution by using local storage
$(document).ready(function(){
if(localStorage.getItem('timerValue')!= null)
{
var storageValue = localStorage.getItem('timerValue').trim();
$('#timer').html(storageValue);
const myArray = storageValue.split("</span>", 3);
var hours =myArray[0].substring(0, myArray[0].length -1).slice(-2);
var mins =myArray[1].substring(0, myArray[1].length -1).slice(-2);
var seconds =myArray[2].slice(-2);
startTimer();
}
else{
$('#timer').html('<span id="hours">00:</span><span id="mins">00:</span><span id="seconds">00</span>');
var storageValue = '<span id="hours">00:</span><span id="mins">00:</span><span id="seconds">00</span>';
var hours =00;
var mins =00;
var seconds =00;
startTimer();
}
$('#start').click(function(){
startTimer();
});
$('#stop').click(function(){
clearTimeout(timex);
});
$('#reset').click(function(){
hours =0;
mins =0;
seconds =0;
$('#hours').html('00:');
$('#mins').html('00:');
$('#seconds').html('00');
localStorage.clear();
});
$('#timer').html(storageValue);
function startTimer(){
timex = setTimeout(function(){
seconds++;
if(seconds >59){
seconds=0;mins++;
if(mins>59)
{
mins=0;
hours++;
if(hours <10) {
$("#hours").text('0'+hours+':');
}
else {
$("#hours").text(hours+':');
}
}
if(mins<10){
$("#mins").text('0'+mins+':');
}
else {
$("#mins").text(mins+':');
}
}
if(seconds <10) {
$("#seconds").text('0'+seconds);
} else {
$("#seconds").text(seconds);
}
var latestTimer = localStorage.setItem('timerValue', $('#timer').html());
startTimer();
},1000);
}
});
#timer {
font-size:150px;
margin:0 auto;
width:1000px;
}
#controls {
margin:0 auto;
width:600px;
}
#controls button {
font-size:24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<center>
<div id="timer">
<span id="hours">00:</span><span id="mins">00:</span><span id="seconds">00</span>
</div>
<div id="controls">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</center>
Upvotes: 0
Reputation: 238
You should store your timer before refresh.
Use localStorage
and onbeforeunload
event.
then whenever page loaded, set your timer with the previous timer value
Upvotes: 0
Reputation: 112
For that, you should use a local-storage, or any technology to save data locally in the browser.
localStorage.setItem('timer', your_time_var);
In there you have documentation how to use that: https://developer.mozilla.org/pl/docs/Web/API/Window/localStorage
Upvotes: 2