具有performance.now（）的計時器

Question

我想使用performance.now實現計時器，因為Date.now取決於用戶的時鍾（ performance.now並非如此），並且當用戶更改系統時鍾時，“ Date.now ”可能會使計時器崩潰。

我想將計時器存儲在localStorage 。 當用戶關閉選項卡或瀏覽器並打開它時，計時器必須重新開始。

重要條件 ：我想考慮關閉瀏覽器/選項卡的時間。 例如，當計時器值為10秒時，用戶關閉瀏覽器。 用戶打開瀏覽器10秒后-計時器值應為20秒。

這是我面臨的問題。

這是不使用localStorage代碼：

 const timerNode = document.getElementById('timer'); const initialTimestamp = performance.now(); setInterval(() => { const seconds = getSeconds(initialTimestamp); timerNode.innerHTML = seconds; }, 200); function getSeconds(initialTimestamp) { return Math.round((performance.now() - initialTimestamp) / 1000); } 

 <div id='timer'></div> 

有什么方法可以使用performance.now將計時器存儲在localStorage中，並在我上面提到的情況下（並觀察條件）恢復計時器嗎？

或者，也許還有另一種獲取UNIX時間戳的方法，它不取決於系統時鍾？

為了演示Date.now（）的問題，請運行此代碼並更改系統時間，例如，將date設置為幾天前。 您將看到，計時器的值為負。

 const timerNode = document.getElementById('timer'); const initialTimestamp = Date.now(); setInterval(() => { const seconds = getSeconds(initialTimestamp); timerNode.innerHTML = seconds; }, 200); function getSeconds(initialTimestamp) { return Math.round((Date.now() - initialTimestamp) / 1000); } 

 <div id='timer'></div> 

Answer 1

是的，您可以使用localStorage來在瀏覽器會話之間持久化。

您將使用setItem設置初始時間，並使用getItem在新的瀏覽器會話中訪問它。 當新的瀏覽器會話開始時，您將檢查是否存在先前的初始時間。 如果是這樣，請使用它。 如果沒有，請創建它。

var initialTimestamp = localStorage.getItem('initialTimestamp');

// If we previously set an initialTimestamp, convert it from string to number.
if (initialTimestamp) {
  initialTimestamp = parseInt(initialTimestamp);
}

// If we never previously set an initial timestamp, create one now.
else {
  initialTimestamp = performance.now();
  localStorage.setItem('initialTimestamp', initialTimestamp);
}