"每次重新加载页面时，Javascript Timer Counter 都会重新启动"

Question

I build a timer to count Daily working time of employee. It is completely working fine until i refresh the page. I have three button clock in, stop, clock out. It should counting the time until I press the clock out button. What should I do in this case? I am not good with javascript so if anyone would love to help me, it would be great.

                       <form method="post" id="work-hour" action=""> 
                                {% csrf_token %}
                                <div class="card" id="holidays">
                                    <div class="card-header">
                                        <h5>Work Timer and Weekly Work History</h5>
                                        <div id="timeDiv"></div> 
                                        <br>
                                        <button id="startBtn" class="btn btn-outline-success Btn">Clock In</button>
                                        <!-- <button id="" class="Btn btn btn-outline-primary">Take a break</button> -->
                                        <button id="stopBtn" class="btn btn-outline-warning Btn">Stop</button>   
                                        <input type="text" hidden id="total_time_hour"  />
                                        <input type="text" hidden id="total_time_minute" />
                                        <input value="Clock Out" type="submit" id="submit" />                                    </div>
                                    
                                     </div>
                                
                       </form>

Answer 1

Maybe you can storage last counter result in localstorage.