如何在 JavaScript 和 HTML 中禁用测验开始按钮并持久化状态

本教程将介绍如何使用 Cookie 在 JavaScript 和 HTML 中禁用测验的开始按钮，并在用户刷新浏览器后保持禁用状态。通过设置 Cookie，我们可以记录按钮的点击状态，并在页面重新加载时读取该状态，从而实现持久化的禁用效果。

使用 Cookie 持久化按钮状态

在测验应用中，我们经常需要禁用“开始”按钮，防止用户重复启动测验。更进一步，我们希望即使在用户刷新浏览器后，该按钮仍然保持禁用状态。这可以通过使用 Cookie 来实现。Cookie 是一种存储在用户浏览器中的小型文本文件，可以用来保存用户数据，并在页面重新加载后仍然可用。

实现步骤

1. HTML 结构:

   首先，确保你的 HTML 结构中包含一个“开始”按钮，并为其添加一个唯一的 ID。

   立即学习“Java免费学习笔记（深入）”；

   

   独响

   一个轻笔记+角色扮演的app

   下载

   开始测验

2. JavaScript 代码:

   接下来，使用 JavaScript 来处理按钮的点击事件，设置 Cookie，并在页面加载时检查 Cookie。

   document.addEventListener('DOMContentLoaded', function() {
     const startButton = document.getElementById('startButton');
   
     // 检查 Cookie 是否存在
     if (getCookie('quizStarted') === 'true') {
       startButton.disabled = true;
     }
   
     // 按钮点击事件处理函数
     startButton.addEventListener('click', function() {
       // 禁用按钮
       startButton.disabled = true;
   
       // 设置 Cookie，有效期为一天
       setCookie('quizStarted', 'true', 1);
   
       // 这里可以添加启动测验的逻辑
       console.log('测验已启动！');
     });
   
     // 设置 Cookie 函数
     function setCookie(name, value, days) {
       let expires = "";
       if (days) {
         let date = new Date();
         date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
         expires = "; expires=" + date.toUTCString();
       }
       document.cookie = name + "=" + (value || "") + expires + "; path=/";
     }
   
     // 获取 Cookie 函数
     function getCookie(name) {
       let nameEQ = name + "=";
       let ca = document.cookie.split(';');
       for(let i = 0; i < ca.length; i++) {
         let c = ca[i];
         while (c.charAt(0) === ' ') c = c.substring(1, c.length);
         if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
       }
       return null;
     }
   });

   代码解释:

   • document.addEventListener('DOMContentLoaded', function() { ... });：确保在 DOM 加载完成后执行代码。
   • getCookie('quizStarted') === 'true'：页面加载时检查名为 quizStarted 的 Cookie 是否存在且值为 true。如果存在，则禁用按钮。
   • startButton.addEventListener('click', function() { ... });：为按钮添加点击事件监听器。
   • startButton.disabled = true;：禁用按钮。
   • setCookie('quizStarted', 'true', 1);：设置 Cookie quizStarted 的值为 true，有效期为 1 天。
   • setCookie(name, value, days)：自定义的设置 Cookie 的函数，可以设置 Cookie 的名称、值和有效期。
   • getCookie(name)：自定义的获取 Cookie 值的函数。

注意事项

• Cookie 的有效期: 在 setCookie 函数中，可以根据实际需求调整 Cookie 的有效期。如果需要永久禁用按钮，可以将有效期设置为较长的时间。
• Cookie 的安全性: Cookie 存储在客户端，因此不适合存储敏感信息。
• Cookie 的大小限制: 浏览器对 Cookie 的大小有限制，一般为 4KB。

总结

通过使用 Cookie，我们可以轻松地在 JavaScript 和 HTML 中禁用测验的开始按钮，并在用户刷新浏览器后保持禁用状态。这种方法简单有效，适用于各种需要持久化状态的 Web 应用。记住要根据实际需求调整 Cookie 的有效期，并注意 Cookie 的安全性。