如何获得倒数计时器重新启动

Question

I am creating an online examination system.

I click the Apply button, then the countdown timer starts. Some time later, the browser page closes. After I click the same exam name, the countdown timer continues from where it left off, but I want the time to start over from the beginning. Please see the screenshots below:

View:

    <h2><p style="float: right" id="countdown"></p></h2>

<a href="<?php echo base_url(); ?>student/Examinations/apply_examinations/<?php echo $value['examination_test_id']; ?>" class="btn btn-primary" id="apply" onclick="resetCountdownInLocalStorage();">Apply</a>

    <script>
        $(document).ready(function () {
    $examination_test_id = $("#examination_test_id").val();
            $time_limit = $("#time_limit").val();
            var d = new Date($time_limit);
            var hours = d.getHours();
            var minute = d.getMinutes();
            var minutes = hours * 60 + minute;
            var seconds = 60 * minutes;

            if (typeof (Storage) !== "undefined") {
                if (sessionStorage.seconds) {
                    seconds = sessionStorage.seconds;
                }
            }
            function secondPassed() {
                var hours = Math.floor(seconds / 3600);
                var minutes = Math.floor((seconds - (hours * 3600)) / 60);
                //   var remainingSeconds = seconds - (hours * 3600) - (minutes * 60);
                var remainingSeconds = seconds % 60;

                if (remainingSeconds < 10) {
                    remainingSeconds = "0" + remainingSeconds;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }

                if (typeof (Storage) !== "undefined") {
                    sessionStorage.setItem("seconds", seconds);
                }

                document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;

                if (seconds == 0) {
                    clearInterval(myVar);
                    document.getElementById('countdown').innerHTML = alert('Timeout');
                    window.location.href = base_url + "student/Examinations/check_answer/" + $examination_test_id;

                    if (typeof (Storage) !== "undefined") {
                        sessionStorage.removeItem("seconds");
                    }
                } else {
                    seconds--;
                }
            }
            var myVar = setInterval(secondPassed, 1000);
        });

function resetCountdownInLocalStorage() {
        sessionStorage.removeItem("seconds");
    }
    </script>

Answer 1

It may depends on browser, according to this link

The lifetime of a browsing context can be unrelated to the lifetime of the actual user agent process itself, as the user agent may support resuming sessions after a restart.

You may have to clean session stroage on tab close I think.