Question 36979 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to stop resetting the timer when the page refreshs using javascript? – Jquery

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…!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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>


  2. 0

    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

    Login or Signup to reply.
  3. 0

    You should store your timer before refresh.

    Use localStorage and onbeforeunload event.

    then whenever page loaded, set your timer with the previous timer value

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search