利用 localStorage 实现页面刷新后倒计时不重置
作者:半夏时间:2026-10-23 01:10:07浏览:561
本文介绍如何解决 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>
上述内容提供了完整的解决方案,旨在辅助读者掌握相关技术要点。欢迎读者参考实践,并支持本站内容更新。
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
