本文介绍如何解决 HTML5 页面刷新导致 JavaScript 倒计时重置的问题。通过利用 localStorage 存储开始时间戳，在每次刷新时读取该值并与当前时间对比，确保倒计时逻辑在页面重载后仍能继续执行，保持时间连续性。
解决页面刷新倒计时重置问题
在开发5分钟倒计时功能时，常遇到页面刷新后倒计时从4分59秒重新开始的问题。为解决此现象，可采用缓存机制：将倒计时起始时间戳与目标时长（5分钟）之和存入缓存，随后以该缓存时间戳减去当前系统时间，即可实现跨页面刷新的持续倒计时。无论用户在倒计时期间进行何种操作，时间流逝是客观持续的，该原理确保了倒计时的连续性。
核心代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单易用的倒计时js代码</title>
</head>
<body>
<div id="time"></div>
<script src="js/jquery-git.js"></script>
<script>
localStorage.setItem('start', new Date().getTime());
countDown(localStorage.getItem('start'));
function countDown(startTime) {
var time = setInterval(function() {
var currentTime = new Date();
var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60);
var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000);
if(min < 10) {
min = "0" + min;
}
if(second < 10) {
second = "0" + second;
}
var countDown = min + ":" + second;
$('#time').html(countDown);
if(second == 0 && min == 0) {
clearInterval(time);
}
}, 1000)
}
</script>
</body>
</html>
上述内容提供了完整的解决方案，旨在辅助读者掌握相关技术要点。欢迎读者参考实践，并支持本站内容更新。