JavaScript stopwatch saving in cookies

Question

I'm a beginner in JavaScript and I'm working in a website, but I got stuck on the stopwatch I'm making.

I need something like, I'm in timer.php and I have a stopwatch; when we press start it starts counting from 00:00:00 and if I move to page exemple1.php I don't want that the stopwatch just stop counting, I want that the stopwatch just keep counting and when I comeback to the timer.php the stopwatch just keep counting forward until I press the stop button and when I press it just stops at that value, for example 00:20:00.

And here I'm stuck. It's in the part that when I move to another page, because the stopwatch just stop and I don't want that I want the stopwatch just keep counting and when I move again to timer.php I see the stopwatch counting and not stopped in 00:00:00.

Here is my code:

Demo - Jsfiddle

Timer.php

    <script language=javascript>

if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1")) ){

    var h=0;
    var m=0;
    var s=0; 



    } else { 
    var h1,s1,m1;

    }


function to_start(){
switch(document.getElementById('btn').value)
{
case 'Pause':
    window.clearInterval(tm); 
    document.getElementById('2btn').value=str;
    document.getElementById('btn').value='Start';
break;
case 'Start':
    tm=window.setInterval('disp()',1000);
    document.getElementById('btn').value='Pause';
break;
}    }
function disp(){

if(s<10) {
    s1='0' + s;
} else {
    s1=s;
}

if(m<10) {
    m1='0' + m;
} else {
     m1=m;
}

if(h<10){
    h1='0' + h;
} else {
     h1=h;
}
// Display the output //
str= h1 + ':' + m1 +':' + s1 ;
document.getElementById('n1').innerHTML=str;


if(s<59){ 
    s=s+1;
}else{
    s=0;
    m=m+1;
if(m==60){
    m=0;
    h=h+1;
} 
}     
localStorage.ongoingh1 = h;

localStorage.ongoingm1 = m;

localStorage.ongoings1 = s;

}
    </script>

    <input type="button" name="btn" id='btn' value="Start" onclick="to_start()";>
    <br><br>
    <div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px;
    width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div>
    <br>
    <br>
    <br>
    <input type="text" name="2btn" id='2btn' value="" />

    <br>
    <br>
    <br>

exemple1.php

<script language=javascript>

 var s1,m1,h1;
     h=localStorage.ongoingh1;
     m=localStorage.ongoingm1;
     s=localStorage.ongoings1;



function to_start(){
    switch(document.getElementById('btn').value)
    {
    case 'Pause':
        window.clearInterval(tm); 
        document.getElementById('2btn').value=str;
        document.getElementById('btn').value='Start';
    break;
    case 'Start':
        tm=window.setInterval('disp()',1000);
        document.getElementById('btn').value='Pause';
    break;
    }
}


function disp(){

    if(s<10) {
         s1="0" + s;
    } else {
         s1=s;
    }

    if(m<10) {
         m1="0" + m;
    } else {
         m1=m;
    }

    if(h<10){
         h1="0" + h;
    } else {
         h1=h;
    }
    // Display the output //
    str= h1 + ':' + m1 +':' + s1 ;
    document.getElementById('n1').innerHTML=str;

    if(s<59){ 
        s++;
    }else{
        s=0;
        m++;
    if(m==60){
        m=0;
        h++;
    } 
    }

}
</script>

Answer 1

If you don't need old browser support you can use HTML5's localstorage function. Store your value and load it every time a new page loads.

timer.php

         <script language=javascript>


 function settimer(){
 if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1")) ){

     h=localStorage.ongoingh1;
     m=localStorage.ongoingm1;
     s=localStorage.ongoings1; 
tm=window.setInterval('disp()',1000);

document.getElementById('btn').value='Pause';

    } else { 
    var h1,s1,m1;

    }
    str= h + ':' + m +':' + s ;
    document.getElementById('n1').innerHTML=str;
    document.getElementById('btn').value='Pause';
    }

function to_start(){
switch(document.getElementById('btn').value)
{
case 'Pause':
    window.clearInterval(tm); 
    document.getElementById('2btn').value=str;
    document.getElementById('btn').value='Start';
break;
case 'Start':
    tm=window.setInterval('disp()',1000);
    document.getElementById('btn').value='Pause';
break;
}    }
function disp(){

if(s<10) {
    s1='0' + s;
} else {
    s1=s;
}

if(m<10) {
    m1='0' + m;
} else {
     m1=m;
}

if(h<10){
    h1='0' + h;
} else {
     h1=h;
}
// Display the output //
str= h1 + ':' + m1 +':' + s1 ;
document.getElementById('n1').innerHTML=str;
localStorage.ongoingh1 = h;

localStorage.ongoingm1 = m;

localStorage.ongoings1 = s;

if(s<59){ 
    s++;
}else{
    s=0;
    m++;
if(m==60){
    m=0;
    h++;
} 
}     


}
    </script>
<body onload="settimer()">
    <input type="button" name="btn" id='btn' value="Start" onclick="to_start()";>
    <br><br>
    <div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px;
    width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div>
    <br>
    <br>
    <br>
    <input type="text" name="2btn" id='2btn' value="" />

    <br>
    <br>
    <br>
    </body>

example1.php

       <script language=javascript>


 function settimer(){
 if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1")) ){

     h=localStorage.ongoingh1;
     m=localStorage.ongoingm1;
     s=localStorage.ongoings1; 
tm=window.setInterval('disp()',1000);

document.getElementById('btn').value='Pause';

    } else { 
    var h1,s1,m1;

    }
    str= h + ':' + m +':' + s ;
    document.getElementById('n1').innerHTML=str;
    document.getElementById('btn').value='Pause';
    }


function to_start(){
    switch(document.getElementById('btn').value)
    {
    case 'Pause':
        window.clearInterval(tm); 
        document.getElementById('2btn').value=str;
        document.getElementById('btn').value='Start';
    break;
    case 'Start':
        tm=window.setInterval('disp()',1000);
        document.getElementById('btn').value='Pause';
    break;
    }
}


function disp(){

    if(s<10) {
         s1="0" + s;
    } else {
         s1=s;
    }

    if(m<10) {
         m1="0" + m;
    } else {
         m1=m;
    }

    if(h<10){
         h1="0" + h;
    } else {
         h1=h;
    }
    // Display the output //
    str= h1 + ':' + m1 +':' + s1 ;
    document.getElementById('n1').innerHTML=str;
localStorage.ongoingh1 = h;

localStorage.ongoingm1 = m;

localStorage.ongoings1 = s;
    if(s<59){ 
        s++;
    }else{
        s=0;
        m++;
    if(m==60){
        m=0;
        h++;
    } 
    }

}

</script>
<body  onload="settimer()">
<input type="button" name="btn" id='btn' value="Start" onclick="to_start()";>
    <br><br>
    <div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px;
    width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div>
    <br>
    <br>
    <br>
    <input type="text" name="2btn" id='2btn' value="" />

    <br>
    <br>
    <br></body>