本文介绍如何利用浏览器 localstorage 持久化存储进度条数值，实现在页面刷新后自动恢复进度，避免计时中断，适用于基于 jquery 的定时器卡片场景。
本文介绍如何利用浏览器 localstorage 持久化存储进度条数值，实现在页面刷新后自动恢复进度，避免计时中断，适用于基于 jquery 的定时器卡片场景。
在 Web 开发中，使用 <progress> 元素配合 JavaScript 实现倒计时或进度可视化非常常见。但默认情况下，所有 DOM 状态（如 value 属性）在页面刷新后都会重置——这显然不符合实际业务需求，例如多卡片计时器需在用户离开再返回时继续运行。
核心解决方案：localStorage
localStorage 是浏览器提供的持久化键值存储机制，数据在同源下长期保留（除非手动清除），且读写简单、兼容性好（支持所有现代浏览器及 IE10+）。它非常适合保存单个进度条的当前值。
以下是优化后的完整实现（已整合并增强健壮性）：
<progress class="timer1" value="0" max="100"></progress>
<!-- 确保 jQuery 已正确加载 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 封装定时器管理器（精简版，修复原代码潜在问题）
$.ii = (function() {
const intervals = {};
return function(key, intervalMs, callback) {
if (arguments.length === 3) {
// 清除已有同名定时器
if (intervals[key]) clearInterval(intervals[key]);
intervals[key] = setInterval(callback, intervalMs);
} else if (arguments.length === 1 && intervals[key]) {
clearInterval(intervals[key]);
delete intervals[key];
}
};
})();
$(document).ready(function() {
const $progress = $('.timer1');
const STORAGE_KEY = 'timer1_value';
// 从 localStorage 恢复进度值
let currentValue = parseInt(localStorage.getItem(STORAGE_KEY) || '0', 10);
currentValue = Math.max(0, Math.min(100, currentValue)); // 安全校验
$progress.val(currentValue);
// 启动定时器：每 36 秒（36000ms）推进 1%
$.ii('t1', 36000, function() {
let val = parseInt($progress.val(), 10);
if (val < 100) {
val++;
$progress.val(val);
localStorage.setItem(STORAGE_KEY, val.toString());
} else {
// 达到 100% 后自动清理存储并停止定时器
localStorage.removeItem(STORAGE_KEY);
$.ii('t1'); // 清除定时器
}
});
});
</script>✅ 关键改进说明：
- 使用 parseInt(..., 10) 显式指定进制，避免字符串隐式转换错误；
- 添加边界校验（Math.max/min），防止非法值污染 localStorage；
- 定时器管理器（$.ii）采用闭包封装，避免全局变量污染；
- 达到最大值后主动移除 localStorage 条目，保持存储清洁。
⚠️ 注意事项：
- localStorage 仅限同协议、同域名、同端口访问，跨标签页共享（适合单用户多窗口场景）；
- 若需服务端同步（如多人协作或防篡改），应结合 PHP + MySQL 存储真实状态，并通过 AJAX 定期同步；
- 移动端 Safari 在无痕模式下可能禁用 localStorage，建议增加 try/catch 容错（生产环境推荐）；
- 多个进度条请为每个实例分配唯一 STORAGE_KEY（如 'card_123_timer'）。
通过以上方案，你无需修改后端逻辑即可实现“刷新不重置”的用户体验，兼顾轻量性与可靠性。
