如何用JavaScript实现按钮每日点击限制（解决刷新失效问题）

我希望使用cookie将按钮的每日点击次数限制为5次，当用户点击满5次后，按钮将无法再被点击。我已实现了点击限制，但存在页面刷新后按钮又可点击的问题，请问如何通过cookie记录用户的点击次数？

我已实现点击5次后禁用按钮，但页面刷新后按钮又可点击。我的需求：点击满5次后禁用按钮，且页面刷新后仍保持禁用状态。

我的代码：

<input type="text" class="form-control" id="prompt" placeholder="Type anything">
<button id="the-button" type="submit">Send</button>
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous">
</script>   
<script type="text/javascript">                                         
localStorage.setItem("limit_click",5);
localStorage.setItem("count",1);
$("#the-button").on("click",function(){
    var limit = localStorage.getItem("limit_click");
    let count = parseInt(localStorage.getItem("count"));    
    if(count>=limit){
        alert('Your free limit counts has expired, please try again tomorrow or consider extending your plan.');
    }
    else{
        localStorage.setItem("count",parseInt(count)+1);
    }
}); 
</script>

你的代码核心问题有两个：一是每次刷新页面都会强制重置count为1，导致之前的点击记录丢失；二是没有在页面加载时检查当前计数是否达到限制，也没有实现每日自动重置的逻辑。下面是基于cookie的完整实现：

核心逻辑 #

1. 用cookie存储点击次数和当日过期时间，保障刷新后数据不丢失
2. 页面初始化时先读取cookie，判断是否已达点击上限，直接同步按钮禁用状态
3. 点击按钮时更新cookie计数，达到限制后立即禁用按钮
4. 设置cookie过期时间为当日23:59:59，实现每日自动重置计数

修改后的完整代码 #

<input type="text" class="form-control" id="prompt" placeholder="Type anything">
<button id="the-button" type="submit">Send</button>
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous">
</script>   
<script type="text/javascript">
// 读取指定名称的cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

// 设置cookie，支持自定义过期时间
function setCookie(name, value, expires) {
    let cookieStr = `${name}=${value}`;
    if (expires) {
        cookieStr += `; expires=${expires.toUTCString()}`;
    }
    document.cookie = cookieStr;
}

const CLICK_LIMIT = 5;
const COUNT_COOKIE = "daily_click_count";
const EXPIRE_COOKIE = "click_expire_time";

$(document).ready(function() {
    const todayEnd = new Date();
    todayEnd.setHours(23, 59, 59, 999); // 设定当日结束时间，用于cookie过期

    // 检查是否跨天，跨天则重置计数
    const expireStr = getCookie(EXPIRE_COOKIE);
    if (!expireStr || new Date(expireStr) < new Date()) {
        setCookie(COUNT_COOKIE, 0, todayEnd);
        setCookie(EXPIRE_COOKIE, todayEnd.toUTCString(), todayEnd);
    }

    // 获取当前点击次数，默认0
    let currentCount = parseInt(getCookie(COUNT_COOKIE)) || 0;
    const $button = $("#the-button");

    // 页面加载时同步按钮状态
    if (currentCount >= CLICK_LIMIT) {
        $button.prop("disabled", true);
    }

    // 按钮点击事件处理
    $button.on("click", function() {
        if (currentCount >= CLICK_LIMIT) {
            alert('Your free limit counts has expired, please try again tomorrow or consider extending your plan.');
            return;
        }

        currentCount += 1;
        setCookie(COUNT_COOKIE, currentCount, todayEnd);

        // 达到限制后禁用按钮
        if (currentCount >= CLICK_LIMIT) {
            $(this).prop("disabled", true);
        }
    });
});
</script>

关键说明 #

• cookie工具函数：getCookie和setCookie简化了cookie的读写操作，避免重复代码
• 每日重置机制：通过存储当日结束时间的cookie，判断是否需要重置点击计数，实现每日刷新限制
• 页面初始化检查：在页面加载完成后立即根据cookie状态设置按钮禁用状态，彻底解决刷新后按钮恢复可点击的问题
• 状态实时同步：每次点击后立即更新cookie并检查是否达到限制，确保按钮状态与计数一致

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