时间戳

首页 > 解决方案 > 即使在“另一页”或“浏览器刷新”中，如何让 setInterval countUp 计时器继续计数？

javascript - 即使在“另一页”或“浏览器刷新”中，如何让 setInterval countUp 计时器继续计数？

问题描述

我尝试在我的标题网页上创建一些“访客计数计时器”。但是，当我选择另一个选项卡时，计时器会从 00:00:00 再次重新启动。即使在“另一页”或“浏览器刷新”中，是否有任何解决方案让它继续计数？我不确定如何将sessionStorage添加到我当前的代码中。

有人愿意为此提供帮助吗？

谢谢

var sec = 0;
    function pad ( val ) { return val > 9 ? val : "0" + val; }
    setInterval( function(){
        document.getElementById("seconds").innerHTML=pad(++sec%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(sec/60%60,10));
        document.getElementById("hours").innerHTML=pad(parseInt(sec/3600%60,10));
    }, 1000);
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>

标签： javascriptsetintervalsession-storage

解决方案

您的解决方案是使用本地存储：

      var sec = 0;
      tmpSec = localStorage.getItem('secs')
      if (tmpSec != null) {
        sec = parseInt(tmpSec,10);
      }
      function pad ( val ) { return val > 9 ? val : "0" + val; }
      setInterval( function(){
        ++sec
        localStorage.setItem('secs', sec)
        document.getElementById("seconds").innerHTML=pad(sec%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(sec/60%60,10));
        document.getElementById("hours").innerHTML=pad(parseInt(sec/3600%60,10));
      }, 1000);

这是保存在 localStorage https://github.com/syronz/micro-games/blob/master/02%20idle%20game/progress.html中的间隔示例

推荐阅读