本文介绍如何利用 localstorage 持久化存储用户对“call button”的点击次数，避免页面刷新导致计数归零，并在达到 3 次后自动启用“skip button”。

在 Web 开发中，localStorage 是一种简单而强大的客户端数据持久化机制，它允许我们在浏览器中长期保存字符串类型的数据（即使关闭标签页或重启浏览器，数据依然存在）。针对您描述的交互逻辑——点击“Call Button”三次后才启用“Skip Button”，但当前因页面刷新导致计数重置的问题，核心解法正是将点击次数存入 localStorage，并在页面加载时读取该值初始化计数器。

以下是完整、可直接运行的优化代码（已修复原文中的变量名错误、缺失声明及逻辑漏洞）：

    
    
    



    Call Button
    Skip Button

    

? 关键要点说明：

• localStorage.getItem() 返回的是字符串，必须用 parseInt() 转换为数字；使用 || 0 可安全处理 null 或 undefined 值，比显式判断更简洁。
• 务必在页面加载时就检查并设置按钮初始状态（如示例中 skipBtn.disabled = counter
• 避免使用 onclick="..." 内联事件处理器，改用 addEventListener 更符合现代实践，也便于维护和调试。
• localStorage.setItem() 的值必须是字符串，因此调用 .toString() 是必要步骤（虽然数字隐式转换也可行，但显式转换更清晰可靠）。

? 进阶提示：
若需支持“重置计数”功能（例如测试或用户主动清空），可添加一个清除按钮并执行：

localStorage.removeItem("clickCounter");
counter = 0;
skipBtn.disabled = true; // 同步 UI

通过以上实现，您的按钮交互将完全脱离页面刷新干扰，真正实现跨会话的用户行为记忆——这是构建流畅、专业级 Web 体验的重要基础。