本文介绍如何利用浏览器 localStorage 持久化保存 HTML 元素的当前值，使计时器进度条在页面刷新后不重置，适用于基于 jQuery 的定时更新场景。

本文介绍如何利用浏览器 localstorage 持久化保存 html `` 元素的当前值，使计时器进度条在页面刷新后不重置，适用于基于 jquery 的定时更新场景。

在 Web 开发中，使用 元素实现可视化计时器（如倒计时或任务进度）十分常见。但默认情况下，页面刷新会导致 DOM 状态重置——进度条会回到初始值（如 value="0"），破坏用户体验。为解决这一问题，可借助浏览器内置的 localStorage API，在客户端持久化存储当前进度值。

妙刷AI

妙刷AI是一款面向图片改造、风格转换和视频创作的 AI 视觉生成工具。

下载

✅ 核心思路

• 页面加载时，从 localStorage 读取已保存的进度值，并初始化 元素；
• 计时器每执行一次增量操作，同步更新 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 实现轻量级状态持久化，既无需服务端改造，又能显著提升交互连续性——是前端计时类功能的实用标配方案。