Question

我想使用performance.now实现计时器，因为Date.now取决于用户的时钟（performance.now不依赖于用户时钟，并且“ Date.now-way”可能会使计时器崩溃，当用户更改系统时钟时。

我想将计时器存储在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>

是否有任何方法可以使用localStorage在performance.now中存储计时器，并在我上面提到的情况下（并遵守条件）恢复计时器？

或者也许还有另一种获取UNIX时间戳的方法，这不取决于系统时钟吗？

要演示Date.now（）的问题，请运行此代码并更改系统时间，例如，将日期设置为几天前。您将看到，计时器的值为负。

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);
}

具有performance.now（）的计时器

1 个答案: