刷新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>

在这段代码中，我有一个计时器。现在，我希望如果用户刷新页面，那么它不会改变并且计时器时间将继续，如果用户按下浏览器后退按钮，那么它将节省退出时间。那么，我该怎么做呢？请帮我。

Answer 1

特别是对于您的代码，您似乎总是在设置您的localstorage价值。在填充之前，您必须检查本地存储中的值是否存在。这是通过使用getItemWebStorage 规范中的方法来实现的，null如果项目不存在，该方法会显式返回。根据规范，如果与对象关联的列表中不存在给定键，则此方法必须返回 null。我使用了session storage类似于本地存储的功能——不同之处在于会话存储生命周期是浏览器中的会话的生命周期。一旦关闭浏览器，该值就会丢失。我已经使用getitem,setitem和remvoveitem会话存储的方法来实现该功能。希望这可以帮助。<script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; var p = document.getElementsByClassName('readTiming')[0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seconds = 0, minutes = 0, hours = 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t;&nbsp; &nbsp; &nbsp; &nbsp; function add() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (sessionStorage.getItem("timeStoreSeconds")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seconds = sessionStorage.getItem("timeStoreSeconds");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (sessionStorage.getItem("timeStoreMinutes")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minutes = sessionStorage.getItem("timeStoreMinutes");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (sessionStorage.getItem("timeStoreHours")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hours = sessionStorage.getItem("timeStoreHours");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seconds++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.setItem("timeStoreSeconds", seconds);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (seconds >= 60) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seconds = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.removeItem("timeStoreSeconds");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minutes++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.setItem("timeStoreMinutes", minutes);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (minutes >= 60) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minutes = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.removeItem("timeStoreMinutes")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hours++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.setItem("timeStoreHours", hours);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //localStorage.setItem("timeStore", p.textContent);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //getElementsByClassName('readTiming').innerHTML = localStorage.getItem("timeStore");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#readTime").val(p.textContent);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function timer() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t = setTimeout(add, 1000);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; timer();&nbsp; &nbsp; </script>

Answer 2

毫无疑问，现在你已经设法让你的代码工作了——如果你不这样做，那么这可能是有趣的。与其他程序一样，它使用localStorage来维护自脚本开始以来经过的当前秒数。匿名自执行函数的行为类似于setInterval或递归setTimeout- 在每次迭代中，根据函数中布置的格式format和保存到存储中的新值显示经过的时间。<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset='utf-8' />&nbsp; &nbsp; &nbsp; &nbsp; <title>Timer with page refresh</title>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div class='readTiming'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <time>00:00:00</time>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function format( time ){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var h = ~~( time / 3600 );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var m = ~~( ( time % 3600 ) / 60 );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var s = time % 60;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return pad( h ) + ':' + pad( m ) + ':' + pad( s );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function pad( i ){ return ( parseInt( i ) < 10 ) ? '0' + parseInt( i ) : parseInt( i ) }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const TIMERNAME='continuous_timer';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( !localStorage.getItem( TIMERNAME ) )localStorage.setItem( TIMERNAME, 0 );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var _time=parseInt( localStorage.getItem( TIMERNAME ) );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _time++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; localStorage.setItem( TIMERNAME, _time );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('.readTiming time').textContent = format( _time );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout( arguments.callee, 1000 );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })();&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </body></html>