如何用LocalStorage存储Call Button点击次数解决页面刷新重置问题

完全可以用LocalStorage存储计数器，这样即使页面刷新，计数也不会丢失。下面是具体实现步骤和修正后的代码：

核心思路 #

1. 页面加载时，从LocalStorage读取已有的计数（无存储值则初始化为0）
2. 每次点击Call Button时，更新计数器并同步到LocalStorage
3. 页面加载和每次点击后，都根据计数器值判断是否启用Skip Button，确保状态始终正确
4. 修正原代码中的变量名错误（原代码混用了checker和counter）

完整修正代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Counter</title>

    <script>
        // 页面加载时初始化计数器：从localStorage读取，无值则设为0
        let counter = parseInt(localStorage.getItem('callButtonCounter')) || 0;

        // 页面加载完成后先检查Skip Button状态
        window.onload = function() {
            updateSkipButtonState();
        };

        function enableButton() {
            // 增加计数
            counter += 1;
            // 将更新后的计数存入localStorage
            localStorage.setItem('callButtonCounter', counter);
            // 更新Skip Button状态
            updateSkipButtonState();
        }

        // 封装状态更新逻辑，提高复用性
        function updateSkipButtonState() {
            const skipButton = document.getElementById('button2');
            skipButton.disabled = counter < 3;
        }
    </script>

</head>
<body>
    <button type="button" id="button1" onclick="enableButton()">Call Button</button>
    <button type="button" id="button2" disabled>Skip Button</button>
</body>
</html>

关键代码说明 #

• 计数器初始化：parseInt(localStorage.getItem('callButtonCounter')) || 0，由于LocalStorage存储的是字符串，需要用parseInt转为数字；如果是首次访问，getItem返回null，此时用|| 0设初始值。
• 同步存储：每次点击后用localStorage.setItem把最新计数存入，确保页面刷新后能读取到正确数值。
• 状态同步：页面加载时调用updateSkipButtonState，避免刷新后Skip Button错误回到禁用状态（即使计数已达标）。
• 变量修正：原代码误用未定义的checker变量，统一改为counter保证逻辑连贯。

额外提示 #

• 如需重置计数器，可在浏览器控制台执行localStorage.removeItem('callButtonCounter')，也可以添加一个重置按钮触发该操作。
• LocalStorage的数据会持久保存在浏览器中，除非用户手动清除缓存或调用删除方法。

内容的提问来源于stack exchange，提问作者CommonSense_Gone