javascript - Javascrip count down timer: prevent reseting on page reload
Get the solution ↓↓↓I have a minute timer which counts from 15 to 0. I don't want to reset (= restart) the timer on page reload. but I can't figure out how to prevent the timer from resetting on a page reload. I'm using javascript with php. I have tried to add the timer time on load to php session but that didn't work for me. any suggestions? thank you :)
function startTimer() {
setTimeout('timer()', 60);
}
var continueMins = localStorage.getItem("continueMins");
var continueSecs = localStorage.getItem("continueSecs");
if (continueMins == 'true') {
mins = continueMins;
} else {
mins = 15;
}
if (continueSecs == 'true') {
secs = continueSecs;
} else {
secs = mins * 60;
}
function timer() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
progressBar = document.getElementById("progressBar");
timerContainer = document.getElementById("timer-container");
expired = document.getElementById("expired");
btcAmount = document.getElementById("btcAmount");
btcAddress = document.getElementById("btcAddress");
window.onbeforeunload = function() {
localStorage.setItem("continueMins", getMinutes());
localStorage.setItem("continueSecs", getSeconds());
}
var totalSeconds = 15 * 60, remainingSeconds = getMinutes() * 60 + getSeconds();
progressBar.style.width = (remainingSeconds * 100 / totalSeconds) + "%";
minutes.innerHTML = getMinutes() < 10 ? "0" + getMinutes() : getMinutes();
seconds.innerHTML = getSeconds() < 10 ? "0" + getSeconds() : getSeconds();
if (mins < 1) {
minutes.classList.add("text-danger");
seconds.classList.add("text-danger");
}
if (mins < 0) {
expired.style.display = 'block';
timerContainer.style.display = 'none';
btcAmount.text = 'Expired';
btcAddress.text = 'Payment Window Expired';
localStorage.removeItem("continueMins");
localStorage.removeItem("continueSecs");
} else {
secs--;
setTimeout('timer()', 1000);
}
}
}
function getMinutes() {
mins = Math.floor(secs / 60);
return mins;
}
function getSeconds() {
return secs - Math.round(mins * 60);
}
startTimer();
<p class="font-18 font-500"><span id="minutes"></span> : <span id="seconds"></span></p>
Answer
Solution:
You could use the localStorage (sessionStorage is also an option but more prone to restart your timer if the user e.g. reconnects in a new tab or restarts the browser)
How to do it to be on the save side (crashes, unexpected bahaviour e.g.you should update the elapsed time in your local storage from time to time. The "normal" situations are handled by checking for the respective event:
var aTimer, bool;
window.onbeforeunload = function (e) {
if (bool) return;
aTimer = setTimeout(function () {
bool = true;
localStorage.setItem("resetTimer", "false");
localStorage.setItem("currentTimer", MY_TIMER_VAR);
localStorage.setItem("sessionDate", MY_NEW_SESSION_VAR);
}, 500);
return ;
};
EDIT If you want that an elapsed timer is valid for lets say 24 hours you have also to place MY_NEW_SESSION_VAR which is a Date.now() converted in hours when reloading you check against TODAY_DATETIME_IN_HOURS which is a Date.now() converted in hours (This was my use case, if you do not need it just leave it out)
The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).
When starting your program (loading js) you should check for the vars with:
var resetTimer = localStorage.getItem("resetTimer");
var sessionDate = localStorage.getItem("sessionDate");
if (resetTimer == "true" || sessionDate > (TODAY_DATETIME_IN_HOURS - 24) ){ // start timer }
To delete a single item
localStorage.removeItem("sessionDate");
If you want to use sessionStorage just replace localStorage with sessionStorage
EDIT full code for the OP tested and working as asked
var countDownTarget;
if (document.readyState!="loading") docReady();
/* Modern browsers */
else document.addEventListener("DOMContentLoaded", docReady);
function docReady() {
countDownTarget = parseInt(localStorage.getItem("countDownTarget"));
console.debug("Initvalue: " + countDownTarget);
if (isNaN(countDownTarget) == true || countDownTarget == "" || countDownTarget <= 0){ // If not defined
countDownTarget = new Date().getTime() + 15 * 60 * 1000;
console.debug("is NaN sInitvalue: " + countDownTarget);
//Update the count down every 1 second
setInterval(countDown, 1000);
} else {
console.debug("else Initvalue: " + countDownTarget);
setInterval(countDown, 1000);
}
}
window.onbeforeunload = function() {
localStorage.setItem("countDownTarget", countDownTarget);
};
// Functions you call
function countDown(){
var now = new Date().getTime();
//console.debug("now " + now);
var distance = countDownTarget - now;
console.debug("distance " + distance);
var mins = distance < 0 ? 0 : Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var secs = distance < 0 ? 0 : Math.floor((distance % (1000 * 60)) / 1000);
/** Add a zero in front of numbers<10 */
mins = prependZero(mins);
secs = prependZero(secs);
// Output the results
document.getElementById("minutes").innerHTML = mins;
document.getElementById("seconds").innerHTML = secs;
if (distance <= 0) {
// clearInterval(x);
localStorage.removeItem("countDownTarget");
clearInterval(countDown);
}
}
function prependZero(i){
if (i < 10) {
i = "0" + i;
}
return i;
}
Copy between your script tags or load as *.js file
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: cannot use isset() on the result of an expression (you can use "null !== expression" instead)
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
About the technologies asked in this question
PHP
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
JavaScript
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
HTML
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to programmierfrage.com
programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.
Get answers to specific questions
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Help Others Solve Their Issues
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.