сохранить время таймера продолжить после refre sh jquery

Question

код:

<div class="readTiming">
    <time>00:00:00</time><br/>
</div>
<input type="hidden" name="readTime" id="readTime">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    var p = document.getElementsByClassName('readTiming')[0],
    seconds = 0, minutes = 0, hours = 0,
    t;
    function add() {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }
        p.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
        timer();
        localStorage.setItem("timeStore", p.textContent);
        getElementsByClassName('readTiming').innerHTML = localStorage.getItem("timeStore");
        $("#readTime").val(p.textContent);
    }
    function timer() {
        t = setTimeout(add, 1000);
    }
    timer();
</script>

В этом коде у меня есть таймер. Теперь я хочу, чтобы пользователь обновил страницу sh, тогда она не изменится, и время таймера будет продолжено, а если пользователь нажмет кнопку браузера назад, это сэкономит время ожидания. Итак, как я могу это сделать? Пожалуйста, помогите мне.

Спасибо

Answer 1

Что касается вашего кода, кажется, что вы всегда устанавливаете значение localstorage. Вы должны проверить, существует ли значение из локального хранилища, прежде чем его заполнять. Это достигается с помощью метода getItem в спецификации WebStorage, который явно возвращает null, если элемент не существует. Согласно спецификации, если данный ключ не существует в списке, связанном с объектом, тогда этот метод должен возвратить нуль.

Я использовал функциональность session storage, которая похожа на локальное хранилище - разница состоит в том, что жизненный цикл хранилища сеансов - это сеанс в браузере. Значение теряется, как только вы закрываете браузер. Я использовал методы хранения сеансов getitem, setitem и remvoveitem для достижения функциональности. Надеюсь, это поможет.

<script type="text/javascript">
        var p = document.getElementsByClassName('readTiming')[0],
            seconds = 0, minutes = 0, hours = 0,
            t;
        function add() {
            if (sessionStorage.getItem("timeStoreSeconds")) {
                seconds = sessionStorage.getItem("timeStoreSeconds");
            }
            if (sessionStorage.getItem("timeStoreMinutes")) {
                minutes = sessionStorage.getItem("timeStoreMinutes");
            }
            if (sessionStorage.getItem("timeStoreHours")) {
                hours = sessionStorage.getItem("timeStoreHours");
            }
            seconds++;
            sessionStorage.setItem("timeStoreSeconds", seconds);
            if (seconds >= 60) {
                seconds = 0;
                sessionStorage.removeItem("timeStoreSeconds");
                minutes++;
                sessionStorage.setItem("timeStoreMinutes", minutes);
                if (minutes >= 60) {
                    minutes = 0;
                    sessionStorage.removeItem("timeStoreMinutes")
                    hours++;
                    sessionStorage.setItem("timeStoreHours", hours);
                }
            }
            p.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
            timer();
            //localStorage.setItem("timeStore", p.textContent);
            //getElementsByClassName('readTiming').innerHTML = localStorage.getItem("timeStore");
            $("#readTime").val(p.textContent);
        }
        function timer() {
            t = setTimeout(add, 1000);
        }
        timer();
    </script>

Answer 2

Без сомнения, к настоящему моменту вам удалось заставить ваш код работать - при маловероятной вероятности того, что вы этого не сделаете, возможно, это может представлять интерес. Как и другие, он использует localStorage для поддержания текущего количества прошедших секунд с момента запуска сценария. Анонимные самоисполняющиеся функции действуют как setInterval или рекурсивно setTimeout - на каждой итерации истекшее время отображается в соответствии с форматом, изложенным в функции format, и новое значение сохраняется в хранилище.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Timer with page refresh</title>
    </head>
    <body>

        <div class='readTiming'>
            <time>00:00:00</time>
        </div>

        <script>
            (function(){

                function format( time ){ 
                    var h = ~~( time / 3600 );
                    var m = ~~( ( time % 3600 ) / 60 );
                    var s = time % 60;
                    return pad( h ) + ':' + pad( m ) + ':' + pad( s );
                }
                function pad( i ){ return ( parseInt( i ) < 10 ) ? '0' + parseInt( i ) : parseInt( i ) }

                const TIMERNAME='continuous_timer';



                (function(){
                    if( !localStorage.getItem( TIMERNAME ) )localStorage.setItem( TIMERNAME, 0 );

                    var _time=parseInt( localStorage.getItem( TIMERNAME ) );
                        _time++;

                    localStorage.setItem( TIMERNAME, _time );

                    document.querySelector('.readTiming time').textContent = format( _time );
                    setTimeout( arguments.callee, 1000 );
                })()
            })();
        </script>
    </body>
</html>