How to make countdown timer not reset when refresh the browser?
26,583
Solution 1
Try to use session storage :
// Store
sessionStorage.setItem("key", "value");
// Retrieve
document.getElementById("result").innerHTML=sessionStorage.getItem("key");
Update
Example :
<head>
</head>
<body>
<div id="divCounter"></div>
<script type="text/javascript">
if (sessionStorage.getItem("counter")) {
if (sessionStorage.getItem("counter") >= 10) {
var value = 0;
} else {
var value = sessionStorage.getItem("counter");
}
} else {
var value = 0;
}
document.getElementById('divCounter').innerHTML = value;
var counter = function () {
if (value >= 10) {
sessionStorage.setItem("counter", 0);
value = 0;
} else {
value = parseInt(value) + 1;
sessionStorage.setItem("counter", value);
}
document.getElementById('divCounter').innerHTML = value;
};
var interval = setInterval(counter, 1000);
</script>
</body>
Solution 2
Store the server time in a cookie (see setcookie) and load that. You'll want to think about how long you want this cookie to last though.
Solution 3
I think you have to save some value in the cookie and reset timer only if timer > x && cookie is already been setted.
Set cookie on init:
setcookie("reloaded","true");
Set cookie on reaload:
setcookie("reloaded","false");
Check:
if($_COOKIE["reloaded"] == false && timer > $time) {
/* reset timer */
}
Solution 4
<form name="counter">
<input type="text" size="8" name="chandresh" id="counter">
</form>
<script type="text/javascript">
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var cnt = 60;
function counter(){
if(getCookie("cnt") > 0){
cnt = getCookie("cnt");
}
cnt -= 1;
document.cookie = "cnt="+ cnt;
jQuery("#counter").val(getCookie("cnt"));
if(cnt>0){
setTimeout(counter,1000);
}
}
counter();
</script>
Source: http://chandreshrana.blogspot.in/2017/01/how-to-make-counter-not-reset-on-page.html
Solution 5
You can use local storage, such as :
localStorage.setItem('countDownValue', curtime); // To set the value
...
curtime = localStorage.getItem('countDownValue'); // To get the value
Author by
mango23
Updated on February 07, 2020Comments
-
mango23 over 4 years
When i refresh the browser, the timer resets, so how to make it not reset? This is my code. Please check it.
<?php echo $waktune; ?> // You can change it into seconds
var detik = <?php echo $waktune; ?>; if (document.images) { parselimit = detik } function begintimer() { if (!document.images) return if (parselimit < 12) { document.getElementById("servertime").style.color = "Green"; } if (parselimit == 1) { document.getElementById("hasil").submit(); } else { parselimit -= 1 curmin = Math.floor(parselimit / 60) cursec = parselimit % 60 if (curmin != 0) curtime = curmin + ":" + cursec + ""else curtime = cursec + " detik"document.getElementById("servertime").innerHTML = curtime setTimeout("begintimer()", 1000) } }
-
mango23 about 10 yearsCan you show me where i write this code??or give me example. sorry i'm newbie at javascript.