页面刷新后按钮disabled状态失效 需实现点击后禁用10分钟

你的代码刷新后按钮不保持禁用，核心是3个逻辑漏洞：

• 页面刷新后DOM会重新构建，按钮默认回到启用状态，你没有在页面加载时根据localStorage的状态主动给按钮加disabled属性，现有判断逻辑写反了，仅在没有存储标记时移除禁用，完全没处理「有存储标记时要禁用按钮」的分支
• 你在localStorage里只存了个"true"的标记，没有存储点击禁用的起始时间，刷新后根本无法判断剩余的禁用时长
• 你写的setTimeout是页面内存级的计时器，页面刷新/关闭后会直接销毁，无法跨页面生命周期计时；另外你写的延时是60000毫秒，实际只有1分钟，和你要的10分钟（600000毫秒）不符

核心逻辑调整为：

1. 点击提交按钮时，将10分钟后的解禁时间戳存入localStorage，同时立即禁用按钮
2. 页面每次加载时，优先读取localStorage里的解禁时间戳：
   • 若不存在存储值：按钮保持默认启用状态
   • 若存在存储值：对比当前时间和解禁时间，未到解禁时间就立即禁用按钮，计算剩余等待时长后设置计时器，到点自动解禁并清除存储；已过解禁时间就直接清除存储，保持按钮启用

HTML部分和原有逻辑一致：

<form method="post" action="someURL">
   <input type="submit" id="btnSubmit" />
</form>

修复后的JS代码：

const DISABLE_DURATION = 10 * 60 * 1000; // 10分钟对应的毫秒数
const submitBtn = document.querySelector("#btnSubmit");
const STORAGE_KEY = "submit_disabled_until";

// 页面加载时先初始化按钮状态
const initButtonState = () => {
  const disabledUntil = localStorage.getItem(STORAGE_KEY);
  if (!disabledUntil) {
    // 没有禁用记录，按钮保持启用
    submitBtn.disabled = false;
    return;
  }

  const remainTime = Number(disabledUntil) - Date.now();
  if (remainTime <= 0) {
    // 已过解禁时间，清存储，启用按钮
    localStorage.removeItem(STORAGE_KEY);
    submitBtn.disabled = false;
    return;
  }

  // 还在禁用期，先禁用按钮，设置剩余时长的计时器
  submitBtn.disabled = true;
  setTimeout(() => {
    submitBtn.disabled = false;
    localStorage.removeItem(STORAGE_KEY);
  }, remainTime);
};

// 绑定点击事件
submitBtn.addEventListener("click", () => {
  // 如果需要阻止表单默认跳转提交，放开下一行的注释即可
  // e.preventDefault();
  const unlockTime = Date.now() + DISABLE_DURATION;
  localStorage.setItem(STORAGE_KEY, String(unlockTime));
  submitBtn.disabled = true;
  setTimeout(() => {
    submitBtn.disabled = false;
    localStorage.removeItem(STORAGE_KEY);
  }, DISABLE_DURATION);
});

// 页面加载立即执行状态初始化
initButtonState();

这个实现不管是页面刷新、还是关掉页面重开，只要还在10分钟的禁用窗口内，按钮都会保持禁用状态，到点自动恢复，不会因为页面重载重置10分钟计时，完全匹配需求。

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