Continue time when page refreshes - javascript

Question

I have this problem and i dont know if there is way that the countdown time will continue even the page is refresh or if the page is refresh there is an alert box saying "Are you sure you want to leave the page?" and if Ok it will redirect to another page?

Here is my ajax script in countdown

 <script type="text/javascript">                          
window.onload = function()
{
    countDown('timeLimit', 'sample.html', 60); 
}

function countDown(elID, output, seconds)
{
     var elem = document.getElementById(elID),
         start = new Date().getTime(), end = start+seconds*1000,
         timer = setInterval(function() {

         var now = new Date().getTime(), timeleft = end-now, timeparts;

         if( timeleft < 0) {
             document.location.href = output;
             clearInterval(timer);
         }
         else {
             timeparts = [Math.floor(timeleft/60000),Math.floor(timeleft/1000)%60];
             if( timeparts[1] < 10) timeparts[1] = "0"+timeparts[1];
             elem.innerHTML = "Time left: "+timeparts[0]+":"+timeparts[1];

         }
     } ,250); // the lower this number, the more accurate the timer. 250 recommended 
  }
</script>

How to continue that time even the page is refresh or redirect to another page when the page is refresh?

Please help..im new in javascript..:(

*"How to continue that time even the page is refresh or redirect to another page "* - Not possible for counters that run in the browser. — Tomalak, Jan 09 '14 at 16:33
You'll have to either use cookies or perform the countdown server-side. — Dryden Long, Jan 09 '14 at 16:35
+1 for cookies, implementing countdown on server-side looks lame to me, but it depends on problem, also if countdown runs out on server-side there is a lot of work to do to refresh client's page — Eugen Halca, Jan 09 '14 at 16:38
cookies are good to go, but if you are using HTML5 web storage is better way to do — A.T., Jan 09 '14 at 16:40

score 0 · Answer 1 · answered Jan 09 '14 at 16:37

0

Short answer... no. You could send the time 2 server before refreshing, but this is unreliable (what do u do if I ctrl+alt+del and kill browser process)?

answered Jan 09 '14 at 16:37

zozo

8,230
19
79
134

score 0 · Answer 2 · answered Jan 09 '14 at 16:38

This is something that will require the use of either cookies, or a server side script of some sort. You could use the cookie to store the counter value, and upon page load/refresh it should check if the cookie exist. If it does, you would then want to load that value and have your counter resume from that value.

The same core concept would apply using a server side script. Whether you are storing that value in a database, or if you are using a socket to maintain the value in a real time script.

score 0 · Answer 3 · edited May 23 '17 at 12:28

If you do not need to use the page hash for some other purpose and you are only navigating within your own site, you could put the time of the timer into window.location.hash if you are just reloading the page, or into the url you are navigating to as myurl.com/somepage.html#yourtime. keep in mind that if you are using a library that requires this value, are linking offsite, or are simply using anchors, this will not work.

See Change hash without reload in jQuery for how to manipulate this value.

What you need to keep in mind is that there is no "state" in Javascript, so any page refresh will cause all of your scripts to completely reload. This makes it so that you need to "store" your persistent values either in a cookie, in localstorage (html5, not consistently implemented across browsers), or on your server (you will need a way to identify your user, such as a login or a browser session for this to work).

Additionally, if you do choose to use any of these methods, remember to store the current time as well. If you do not, you will have no context to continue the count after the user returns to the page.

Continue time when page refreshes - javascript

3 Answers3