添加带7天有效期Cookie的按钮点击次数限制功能

问题拆解 #

• 点击计数完全无效：ClickCount变量定义在randomString函数内部，每次点击按钮调用这个函数时，它都会被重置为0，之前的点击次数根本存不住。而且你写的countClicks限制函数，从头到尾没被调用过，等于白写。
• Cookie逻辑完全缺失：代码里的setTimeout是空函数，完全没实现从Cookie读取点击次数、更新Cookie、设置7天过期的逻辑，这就导致没法跨会话保存点击限制。
• 生成密码的逻辑没做拦截：不管点击次数是否超限，每次点击都会直接生成新密码，没有先判断是否还能点击。

修复后的完整代码 #

HTML部分 #

<h2 style="color: green"> Random Safe Code </h2>
<h3> Click the button to generate your code </h3>
<form name="randomform">
    <input type="button" value="Generate Code" onClick="randomString();">
    <br><br>
    <b><p id="randomfield" style="color: green"> </p></b>
</form>

JavaScript部分 #

function randomString() {
    const characters = "12345";
    const clickLimit = 1; // 最大点击次数
    let clickCount = getClickCountFromCookie(); // 从Cookie读取已有次数

    // 检查是否超过点击限制
    if (clickCount >= clickLimit) {
        alert(`You can only click this button ${clickLimit} time.`);
        return;
    }

    // 生成5位随机密码
    let lenString = 5;
    let randomstring = '';
    for (let i = 0; i < lenString; i++) {
        const rnum = Math.floor(Math.random() * characters.length);
        randomstring += characters.substring(rnum, rnum + 1);
    }

    // 更新页面显示
    document.getElementById("randomfield").innerHTML = randomstring;

    // 更新点击次数并写入Cookie，设置7天过期
    clickCount++;
    setClickCountToCookie(clickCount);
}

// 从Cookie读取点击次数
function getClickCountFromCookie() {
    const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith('clickCount='));
    return cookieValue ? parseInt(cookieValue.split('=')[1]) : 0;
}

// 将点击次数写入Cookie，设置7天过期
function setClickCountToCookie(count) {
    const expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + 7); // 7天后过期
    document.cookie = `clickCount=${count}; expires=${expiryDate.toUTCString()}; path=/`;
}

修复说明 #

1. Cookie读写逻辑：新增了getClickCountFromCookie和setClickCountToCookie两个函数，专门处理Cookie的读取和写入，设置了7天的过期时间，确保每周重置一次。
2. 计数不重置：现在点击次数从Cookie读取，不再每次调用函数都重置，跨页面刷新、重新打开浏览器都会保留计数。
3. 先检查再生成：每次点击按钮先判断当前次数是否超过限制，只有没超限才会生成密码并更新计数。
4. 简化冗余代码：去掉了没用的空setTimeout和没被调用的countClicks函数，逻辑更直接。

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