在开发在线测验系统时，经常需要控制用户只能点击一次“开始测验”按钮，防止重复进入或刷分。如果仅仅在 JavaScript 里把按钮设为 disabled，一旦页面刷新，状态就会丢失。要让禁用状态持久化，就得把标记存到浏览器本地存储中。
一、基础 HTML 结构
先准备一个简单的页面，包含一个开始按钮和一个用于提示的区域。按钮默认是可用的，是否禁用由脚本根据存储状态决定。
注意在 HTML 里写标签名称时要转义，比如我们说的是 <button> 元素，而不是真的插入一个按钮标签破坏结构。真正的按钮代码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>测验页面</title> </head> <body> <button id="startBtn" type="button">开始测验</button> <p id="tip"></p> <script src="app.js"></script> </body> </html>
上面的结构非常轻量，没有引入任何框架。id 为 startBtn 的按钮就是我们要控制的对象，tip 段落用来向用户展示为什么按钮不可点。
二、使用 localStorage 持久化禁用状态
localStorage 是浏览器提供的本地键值存储，数据除非主动清除，否则一直存在。我们可以在用户点击按钮时，写入一个标记，例如 quizStarted 为 true。下次加载页面时读取它，如果为 true 就禁用按钮。
下面是一段完整的 JavaScript 实现。代码中使用了 localStorage.getItem 和 setItem 方法，并在 DOMContentLoaded 时还原状态：
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('startBtn');
var tip = document.getElementById('tip');
var started = localStorage.getItem('quizStarted');
// 如果之前已经点过，则禁用并提示
if (started === 'true') {
btn.disabled = true;
tip.textContent = '测验已经开始，刷新页面也无法重新进入。';
}
btn.addEventListener('click', function () {
// 点击后禁用并持久化
btn.disabled = true;
localStorage.setItem('quizStarted', 'true');
tip.textContent = '测验进行中，状态已保存。';
// 这里可以接着写跳转或加载题目的逻辑
});
});
这段脚本的逻辑是：页面加载时检查 localStorage 里有没有 quizStarted 这个键，值为字符串 'true' 时就禁用按钮。点击事件中同样写入该值，从而实现跨刷新持久化。
需要注意的是，localStorage 只能存字符串，所以读取后要做严格比较。若写成 if (started) 会因为空字符串之外的任意值都视为真，导致逻辑偏差。
三、清除状态与多场景处理
有些业务里，用户提交完测验后应该允许再次练习，这时就要提供清除标记的方法。可以暴露一个重置函数，或者在测验完成接口返回后调用。
例如增加一个“重置测验”的隐藏按钮，或者直接在提交成功回调里清除：
function resetQuiz() {
localStorage.removeItem('quizStarted');
var btn = document.getElementById('startBtn');
btn.disabled = false;
document.getElementById('tip').textContent = '';
}
// 假设测验完成后的处理
function onQuizSubmit() {
// 提交逻辑...
resetQuiz();
}
这样用户在完成测验后刷新页面，按钮又会变为可用。如果是不允许重做的考试系统，则不要调用清除逻辑即可。
另外，在多标签页场景下，一个标签页点击了开始，其他标签页不会自动同步。可以监听 storage 事件来跨页更新：
window.addEventListener('storage', function (e) {
if (e.key === 'quizStarted') {
var btn = document.getElementById('startBtn');
if (e.newValue === 'true') {
btn.disabled = true;
} else {
btn.disabled = false;
}
}
});
storage 事件只有当同源的其他文档修改 localStorage 时才会触发，因此非常适合多标签页状态联动。结合前面的加载还原，就能做到任何地方改动，所有页面同步禁用。
四、对比 cookie 与 sessionStorage
除了 localStorage，开发者也可能想到 cookie 或 sessionStorage。三者的区别直接影响方案选择。
| 存储方式 | 生命周期 | 是否随请求发送 | 适用场景 |
|---|---|---|---|
| localStorage | 永久，除非代码或用户清除 | 否 | 长期禁用标记、用户偏好 |
| sessionStorage | 仅当前标签页会话 | 否 | 临时禁止，关页即失效 |
| cookie | 可设过期时间 | 是 | 需服务端感知的状态 |
如果后端也要知道用户是否已经开过测验，用 cookie 更合适；若纯前端控制且要持久，localStorage 最简洁。sessionStorage 则适合那些关掉页面就允许重来的轻量练习。
综上，通过 HTML 按钮配合 JavaScript 操作 localStorage，就能稳定实现“禁用测验开始按钮并持久化状态”的需求，且代码量少、兼容性良好。
JavaScriptHTMLlocalStorage修改时间：2026-08-07 03:33:29