本文详解如何利用浏览器 localstorage 持久化存储按钮点击次数，避免页面刷新导致计数归零，并基于累计点击数动态启用禁用按钮。
在 Web 开发中，用户交互状态（如点击次数）若仅依赖内存变量（如 let counter = 0），一旦页面刷新或重新加载，该值将立即丢失——这正是你遇到的问题：每次点击“Call Button”后页面刷新，计数器重置为 0。
解决方案是使用 localStorage：它提供持久化、同源、字符串键值对的客户端存储能力，数据在关闭浏览器后仍保留（除非手动清除），完美适配此类轻量状态管理需求。
✅ 正确初始化与读取计数器
首次访问时需从 localStorage 安全读取已有值；若不存在，则初始化为 0。注意：localStorage.getItem() 总是返回字符串或 null，必须显式转换为数字：
let counter = localStorage.getItem("clickCounter");
if (counter === null) {
counter = 0;
} else {
counter = parseInt(counter, 10); // 建议指定进制，避免意外解析
}✅ 更新计数并同步到 localStorage
每次点击“Call Button”时，先递增计数器，再立即将新值以字符串形式写入 localStorage，确保状态即时持久化：
function enableButton() {
counter += 1;
localStorage.setItem("clickCounter", counter.toString());
// 达到3次点击后启用 Skip Button
if (counter >= 3) {
document.getElementById("button2").disabled = false;
}
}✅ 完整可运行示例（含防刷新优化）
以下是修正后的完整 HTML 文件，已修复原始代码中的多个关键问题：
- ✅ 移除隐式全局变量 checker（原代码未声明，会污染全局作用域）；
- ✅ 为
- ✅ 页面加载时自动检查当前计数并设置按钮状态（例如用户刷新后，若已点满3次，Skip Button 应保持启用）；
Click Counter with localStorage
⚠️ 注意事项与最佳实践
- 不要依赖 onclick 内联属性：易出错且不利于维护，优先使用 addEventListener；
- 始终校验 localStorage 返回值：getItem() 可能返回 null 或非数字字符串，parseInt(..., 10) + || 0 是安全兜底方案；
- 页面加载时必须重置 UI 状态：仅更新 localStorage 不够，还需根据当前值主动设置按钮 disabled 属性；
- 如需重置计数：可调用 localStorage.removeItem("clickCounter") 或 localStorage.clear()（谨慎使用）；
- 兼容性无忧：localStorage 在所有现代浏览器中均受支持（IE8+）。
通过以上实现，你的“Call Button”点击计数将真正持久化——无论刷新、关闭标签页甚至重启浏览器，只要不手动清空本地存储，计数始终延续，Skip Button 的启用逻辑也将稳定可靠。
