本文介绍使用 localstorage 在浏览器中持久化存储计数器状态，使数字在页面刷新后不重置，继续累加。通过读取、更新并同步写入 localstorage，实现跨会话的连续计数。

本文介绍使用 localstorage 在浏览器中持久化存储计数器状态，使数字在页面刷新后不重置，继续累加。通过读取、更新并同步写入 localstorage，实现跨会话的连续计数。

在网页开发中，JavaScript 变量默认是内存级的——一旦页面刷新或关闭，所有变量值都会丢失。若需让计数器（如本例中两位十进制递增数字）在刷新后“记住”当前状态并继续增长，必须将数据持久化到客户端存储中。localStorage 是最简洁、兼容性好且无需服务器参与的理想方案：它以字符串键值对形式长期保存在用户浏览器中（有效期为永久，除非手动清除或代码删除），且容量通常达 5–10 MB。

以下是完整可运行的解决方案，已修正原始代码中的关键问题（如 getElementById('num1') 错误——HTML 中并无 id="num1" 元素，实际应为 id="num9"；同时补充了初始化逻辑与健壮性处理）：

0

0

<script> // ✅ 从 localStorage 恢复状态，未设置时默认为 0 let number1 = parseInt(localStorage.getItem('number1')) || 0; let number2 = parseInt(localStorage.getItem('number2')) || 0; const el = document.getElementById('num9'); // 对应 HTML 中 id="num9" const el1 = document.getElementById('num'); // 对应 HTML 中 id="num" // ? 初始化显示 el.innerText = number1; el1.innerText = number2; function incrementSeconds() { if (number1 < 9) { number1 += 1; el.innerText = number1; localStorage.setItem('number1', number1); } else if (number2 < 9) { number1 = 0; el.innerText = number1; localStorage.setItem('number1', number1); number2 += 1; el1.innerText = number2; localStorage.setItem('number2', number2); } // ⚠️ 当 number2 达到 9 且 number1 再次满 9 时，计数将停止（符合原逻辑） } const increase = setInterval(incrementSeconds, 500); </script>

注意事项与最佳实践：

• ✅ 类型安全：localStorage 只支持字符串，务必用 parseInt() 转换读取值，避免 "0" + 1 → "01" 这类隐式拼接错误；写入时 setItem 会自动转字符串，无需额外处理。
• ✅ ID 匹配：原始代码中 getElementById('num1') 无法获取元素（HTML 中无该 ID），已修正为 num9，确保 DOM 引用准确。
• ✅ 首次加载即同步：在启动定时器前，先将 localStorage 的值渲染到页面，避免视觉延迟。
• ? 不要用于敏感数据：localStorage 可被前端脚本任意读写，切勿存储密码、token 或用户隐私信息。
• ? 同源限制：数据仅在相同协议、域名和端口下可用，跨子域或 HTTP/HTTPS 不共享。

通过以上实现，计数器不仅每 500ms 自动递增，更能在用户关闭标签页、重启浏览器甚至数日后再次访问时，从上次中断处继续计数——真正实现“无感持久化”。