JavaScript中如何让已触发的onclick按钮禁用逻辑刷新页面后仍生效

要解决刷新后冷却时间重置的问题，核心是把冷却截止时间持久化存储在本地，页面加载时自动校验当前是否还在冷却期，自动恢复禁用状态和剩余倒计时。

完整修改后的代码 #

JS代码 #

// 页面加载完成后先校验冷却状态
$(document).ready(function () {
  const COOL_DOWN_KEY = 'button_cool_down_end';
  // 读取存储的冷却截止时间
  const coolDownEnd = localStorage.getItem(COOL_DOWN_KEY);
  const now = Date.now();

  // 如果还在冷却期
  if (coolDownEnd && now < Number(coolDownEnd)) {
    // 禁用按钮
    $("#upside").attr("disabled", true);
    $("#downside").attr("disabled", true);
    // 计算剩余冷却时间
    const remainTime = Number(coolDownEnd) - now;
    // 启动倒计时
    setTimeout(enableButtons, remainTime);
  }

  // 绑定按钮点击事件，也可以保留原有onclick写法
  $("#upside").click(up);
});

function up() {
  const COOL_DOWN_KEY = 'button_cool_down_end';
  const coolDownTime = 15 * 1000; // 15秒冷却时长
  const coolDownEnd = Date.now() + coolDownTime;
  // 存储冷却截止时间到本地
  localStorage.setItem(COOL_DOWN_KEY, coolDownEnd);
  // 禁用按钮
  $("#upside").attr("disabled", true);
  $("#downside").attr("disabled", true);
  // 启动倒计时
  setTimeout(enableButtons, coolDownTime);
}

// 复用的恢复按钮方法
function enableButtons() {
  const COOL_DOWN_KEY = 'button_cool_down_end';
  $("#upside").removeAttr("disabled");
  $("#downside").removeAttr("disabled");
  // 清除存储的冷却标记
  localStorage.removeItem(COOL_DOWN_KEY);
  window.location = '/Balnce_add';
}

HTML代码 #

保留原有代码即可，推荐删除onclick属性用上述JS事件绑定写法更规范：

<button id="upside" type="submit" class="btn btn-success">Up</button>

逻辑说明 #

• 用localStorage存储冷却截止时间，属于浏览器本地持久化存储，刷新/关闭页面再打开数据都不会丢失
• 页面每次加载都会先校验当前时间是否在冷却期内，没到期会自动禁用按钮并启动剩余时间的倒计时
• 倒计时结束后自动清除存储的冷却标记，避免下次打开页面误禁用按钮
• 移除了原代码中冗余的$(document).ready嵌套，因为点击触发函数时DOM已经加载完成，不需要重复判断

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