本文介绍如何利用浏览器 localStorage 持久化保存 HTML <progress> 元素的当前值，使计时器进度条在页面刷新后不重置，适用于基于 jQuery 的定时更新场景。
本文介绍如何利用浏览器 localstorage 持久化保存 html `
在 Web 开发中，使用 <progress> 元素实现可视化计时器（如倒计时或任务进度）十分常见。但默认情况下，页面刷新会导致 DOM 状态重置——进度条会回到初始值（如 value="0"），破坏用户体验。为解决这一问题，可借助浏览器内置的 localStorage API，在客户端持久化存储当前进度值。
✅ 核心思路
- 页面加载时，从 localStorage 读取已保存的进度值，并初始化 <progress> 元素；
- 计时器每执行一次增量操作，同步更新 DOM 值并写入 localStorage；
- 进度达上限（如 100）时，清除对应键值，避免残留无效状态。
? 示例代码（优化整合版）
<progress class="timer1" value="0" max="100"></progress>
<!-- 引入 jQuery（建议使用 CDN 或本地安全版本） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 自定义定时器管理器（已精简并修复潜在问题）
$.ii = function(key, interval, callback) {
const timers = $.ii.timers || ($.ii.timers = {});
// 清除已有同名定时器
if (timers[key]) clearInterval(timers[key]);
// 启动新定时器
timers[key] = setInterval(callback, interval);
};
$(document).ready(function() {
// 从 localStorage 恢复进度
const savedValue = parseInt(localStorage.getItem("timer1_value")) || 0;
$('.timer1').val(Math.min(savedValue, 100)); // 防止越界
// 启动每 36 秒（36000ms）递增 1 的计时器
$.ii('t1', 36000, function() {
let currentValue = parseInt($('.timer1').val()) || 0;
if (currentValue < 100) {
currentValue++;
$('.timer1').val(currentValue);
localStorage.setItem("timer1_value", currentValue);
} else {
// 达到最大值：清除定时器 & localStorage 键
$.ii.timers['t1'] && clearInterval($.ii.timers['t1']);
delete $.ii.timers['t1'];
localStorage.removeItem("timer1_value");
}
});
});
</script>⚠️ 注意事项
- 安全性与兼容性：localStorage 仅在同源（协议 + 域名 + 端口）下有效，且不支持跨标签页实时同步（如需多标签协同，应考虑 BroadcastChannel 或服务端存储）；
- 数据类型：localStorage 只存储字符串，务必用 parseInt() 转换数值，避免 "99" + 1 === "991" 类型错误；
- 边界防护：显式限制 value 不超过 max（如 Math.min(savedValue, 100)），防止因异常数据导致 UI 错误；
- 服务端协同建议：若需多设备/用户间状态一致（如共享任务进度），应将进度同步至后端数据库（MySQL/MariaDB），前端仅作本地缓存与兜底。
通过 localStorage 实现轻量级状态持久化，既无需服务端改造，又能显著提升交互连续性——是前端计时类功能的实用标配方案。
