本文介绍使用 localstorage 在浏览器中持久化存储计数器状态，使数字在页面刷新后不重置，继续累加。通过读取、更新并同步写入 localstorage，实现跨会话的连续计数。
本文介绍使用 localstorage 在浏览器中持久化存储计数器状态，使数字在页面刷新后不重置，继续累加。通过读取、更新并同步写入 localstorage，实现跨会话的连续计数。
在网页开发中，JavaScript 变量默认是内存级的——一旦页面刷新或关闭，所有变量值都会丢失。若需让计数器（如本例中两位十进制递增数字）在刷新后“记住”当前状态并继续增长，必须将数据持久化到客户端存储中。localStorage 是最简洁、兼容性好且无需服务器参与的理想方案：它以字符串键值对形式长期保存在用户浏览器中（有效期为永久，除非手动清除或代码删除），且容量通常达 5–10 MB。
以下是完整可运行的解决方案，已修正原始代码中的关键问题（如 getElementById('num1') 错误——HTML 中并无 id="num1" 元素，实际应为 id="num9"；同时补充了初始化逻辑与健壮性处理）：
<form method="POST">
<div style="background-color: white; display: flex; flex-wrap: nowrap; justify-content: space-evenly; margin-bottom: 15px; border-radius: 5px;">
<p id="num" style="color: yellow; margin-top: 10px; margin-left: -15px;" class="number_border">0</p>
<p id="num9" style="color: yellow; margin-top: 10px; margin-left: -15px;" class="number_border">0</p>
</div>
</form>
<style type="text/css">
.number_border {
text-align: center;
border-radius: 5px;
background: red;
width: 20px;
height: 30px;
}
</style>
<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 自动递增，更能在用户关闭标签页、重启浏览器甚至数日后再次访问时，从上次中断处继续计数——真正实现“无感持久化”。
