JavaScript 本地存储秒计数器

Question

我的问题如下:是否可以使用本地存储创建第二个计数器？我的意思是你加载页面，计数器从 1 开始一个一个地计数。您在 5 秒重新加载页面，计数器不会重置，而是从 5 继续计数。这可能吗？

我有一个带有简单秒计数器的代码，但我不知道如何让它与本地存储一起工作

var seconds = 0;
var el = document.getElementById('seconds-counter');

function incrementSeconds() {
seconds += 1;
el.innerText = seconds;
}



var cancel = setInterval(incrementSeconds, 1000);

<div id='seconds-counter'> </div>

Answer 1

这样吗？

<div id="seconds-counter">_</div>
<!-- button id="bt-stop-counter"> stop counter </button -->

const 
  counterLimit  = 5  // <-- your counter limit value....
, div_s_counter = document.querySelector('#seconds-counter')
, btStopCounter = document.querySelector('#bt-stop-counter')
, timeRef_ls    = localStorage.getItem('counterVal') || 0
, timeRef       = (new Date()) - (timeRef_ls * 1000)
, CounterIntv   = setInterval(() =>
  {
  let seconds = Math.floor(((new Date()) - timeRef) / 1000)

  if (seconds >= counterLimit )  // stopCounter()
    {
    div_s_counter.textContent = seconds = counterLimit
    clearInterval( CounterIntv ) 
    }
  div_s_counter.textContent = seconds
  localStorage.setItem('counterVal', seconds.toString(10))
  }
  , 500)
;
div_s_counter.textContent = timeRef_ls

/* disable counter reset ------------------------------------
  {
  clearInterval( CounterIntv )          // to stop the counter
  localStorage.removeItem('counterVal') // remove the counter
  }

btStopCounter.onclick = stopCounter
------------------------------------------------------------*/