在线测验系统中有一个非常典型的需求：用户完成测验并提交答案后，开始按钮必须保持禁用状态，即使用户刷新页面、重新打开浏览器也不能再次答题。要实现这种跨会话的状态记忆，最传统也最兼容的方案就是利用Cookie。本文将从原理到代码完整讲解如何用Cookie记录测验完成状态，并据此控制HTML按钮的禁用与启用。
一、需求分析与Cookie持久化的基本原理
先明确需求场景：一个测验页面上有一个开始按钮，用户点击进入测验，完成并提交后，这个按钮需要变成灰色不可点击。如果只是用JavaScript修改变量的值或DOM属性，页面一刷新所有状态就会归零，用户又可以重新答题，这在防刷分、防重复提交的场景下显然不可接受。
Cookie是浏览器存储在客户端的一小段文本数据，它有一个关键特性：随页面请求自动携带，且生命周期可以独立于浏览器会话之外。只要给Cookie设置了较长的过期时间（比如7天、30天），浏览器关闭再打开，这个Cookie依然存在。页面加载时用JavaScript读取Cookie判断用户是否已完成测验，是决定按钮状态的核心逻辑。
Cookie的基本结构包含名称、值、过期时间、路径和域名等字段。对于测验状态这种简单场景，我们只需要一个形如quiz_done=1的键值对。需要注意Cookie的值不支持分号、逗号等特殊字符，存储简单标记完全没有问题。另外Cookie有4KB左右的大小限制，只存一个状态标志绰绰有余。
二、完整代码实现：写入、读取Cookie并控制按钮状态
下面给出一个可直接运行的完整示例。核心思路是三步：第一，页面加载时读取Cookie，如果发现完成标记就立即禁用按钮；第二，用户点击按钮后弹出确认，完成测验时写入Cookie；第三，禁用后同时改变按钮的视觉样式，避免用户疑惑。先看完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cookie持久化禁用测验按钮</title>
<style>
#startBtn {
padding: 12px 32px;
font-size: 16px;
background: #1e80ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
#startBtn:disabled {
background: #b0b0b0;
cursor: not-allowed;
}
</style>
</head>
<body>
<h3>在线测验</h3>
<p>每人只能参加一次测验，提交后无法重新开始。</p>
<button id="startBtn" onclick="startQuiz()">开始测验</button>
<p id="msg"></p>
<script>
// 写入Cookie，maxAge为有效期（天）
function setQuizCookie(name, value, days) {
var d = new Date();
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
// path=/ 保证整站任意页面都能读到
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
// 按名称读取Cookie
function getQuizCookie(name) {
var key = name + "=";
var arr = document.cookie.split(";");
for (var i = 0; i < arr.length; i++) {
var c = arr[i].trim();
if (c.indexOf(key) === 0) {
return c.substring(key.length, c.length);
}
}
return "";
}
// 页面加载时检查状态并禁用按钮
window.onload = function () {
if (getQuizCookie("quiz_done") === "1") {
disableStartButton();
document.getElementById("msg").innerText =
"您已完成测验，无法重复参加。";
}
};
// 禁用按钮并更新提示
function disableStartButton() {
var btn = document.getElementById("startBtn");
btn.disabled = true;
btn.innerText = "已完成测验";
}
// 点击开始，模拟完成测验后写入Cookie
function startQuiz() {
// 这里可以跳转到答题页，本例模拟立即完成
if (confirm("确定开始测验吗？提交后将不能重新作答。")) {
// 假设用户完成了测验
finishQuiz();
}
}
function finishQuiz() {
setQuizCookie("quiz_done", "1", 7); // 7天后允许重新测验
disableStartButton();
document.getElementById("msg").innerText = "测验已提交，感谢参与！";
}
</script>
</body>
</html>代码中有几个细节值得展开。首先是setQuizCookie函数中的expires字段，它决定了Cookie的存活周期，不设置该字段时Cookie是会话级的，浏览器关闭就消失，起不到持久化作用。其次是path=/，如果不设置路径，Cookie默认只对当前目录有效，用户跳转到其他路径的页面就读不到状态，建议显式指定为根路径。
读取Cookie时要注意document.cookie返回的是所有Cookie拼接成的字符串，各条目以分号加空格分隔，所以代码里用split(";")后再trim()逐条匹配。这个手写解析函数兼容所有浏览器，如果项目允许引入现代API，也可以用一行document.cookie.split("; ").find(row => row.startsWith("quiz_done="))来简化，但要注意找不到时返回undefined需要做空值处理。
三、方案对比与进阶优化建议
实现持久化未必只能用Cookie，现代浏览器提供了localStorage和sessionStorage。三者的核心区别在于：sessionStorage的生命周期最短，标签页关闭即销毁，不适合本场景；localStorage理论上永久保存，除非手动清除，体验上和长效Cookie接近；Cookie的优势是可以设置过期时间、能被服务端读取、兼容性最好。下面的对比表可以作为选型参考：
| 方案 | 生命周期 | 容量 | 服务端可读 |
|---|---|---|---|
| Cookie | 可自定义过期时间 | 约4KB | 是 |
| localStorage | 永久，除非手动清除 | 约5MB | 否 |
| sessionStorage | 标签页关闭即失效 | 约5MB | 否 |
无论选哪种方案，都必须清醒地认识到：客户端存储的状态是可以被用户清除的。用户删除Cookie或用浏览器无痕模式访问，按钮就会恢复可用。因此如果测验涉及成绩、排名或奖励，服务端必须做二次校验，例如在提交答案的接口里检查该用户是否已交卷，Cookie只能作为提升体验的第一道防线，不能作为唯一的安全保障。
还有几个实用优化点。第一，可以在Cookie值里存入完成时间戳，页面加载时判断是否超过有效期，实现“冷却期”效果，比如24小时后自动解锁按钮；第二，给提交动作加上防抖，避免用户快速双击导致重复请求；第三，如果测验按科目区分，Cookie名称可以带上科目标识，如quiz_done_math、quiz_done_english，各自独立控制；第四，禁用按钮的同时用提示文字说明原因，比单纯变灰的用户体验更好。
总结来说，用Cookie持久化禁用测验开始按钮是一个实现简单、兼容性好、可控性强的方案。核心就是页面加载时读Cookie、完成测验时写Cookie这两步逻辑，再配合合理的过期时间和视觉反馈，就能满足绝大多数单次测验场景的需求。记住关键原则：客户端负责体验，服务端负责安全，两者配合才能构建出可靠的测验系统。
Cookie持久化JavaScript禁用按钮测验系统开发修改时间：2026-09-13 01:32:33