使用JavaScript实现点击按钮后内容展示5分钟且刷新页面仍生效

原有代码核心问题 #

• 未存储倒计时起始时间，刷新后无法判断5分钟有效期是否结束，会永久保留禁用状态
• timer是点击事件内的局部变量，全局作用域下无法访问，clearTimeout逻辑完全无效
• 执行时序错误：当前逻辑是点击后等5分钟才标记禁用，需求实际是点击后立即生效，5分钟后自动失效
• 缺少过期状态自动重置、清除本地存储过期数据的逻辑

完整调整后代码 #

// 配置5分钟有效期
const LIMIT = 5 * 60 * 1000
let timer = null

// 页面加载时先校验状态
checkStatus()

// 按钮点击事件
jQuery('#button').click(function() {
  // 点击后立即触发展示/禁用效果
  setStatusValid()
  // 启动倒计时，到期后自动重置状态
  timer = setTimeout(resetStatus, LIMIT)
  // 存储倒计时起始时间戳到localStorage
  localStorage.setItem('startTime', Date.now().toString())
})

// 生效逻辑：展示指定段落、禁用对应表单
function setStatusValid() {
  $("#statusMsg").text("内容已展示，5分钟后自动隐藏")
  $('#employeeForm_OOBPIN').prop('disabled', true)
  // 可在此补充指定段落的展示逻辑，例如：$('#目标段落ID').show()
}

// 重置逻辑：隐藏段落、恢复表单可用性
function resetStatus() {
  $("#statusMsg").text("有效期已结束")
  $('#employeeForm_OOBPIN').prop('disabled', false)
  // 可在此补充指定段落的隐藏逻辑，例如：$('#目标段落ID').hide()
  // 清除本地存储和定时器
  localStorage.removeItem('startTime')
  if(timer) clearTimeout(timer)
}

// 页面加载时校验历史状态是否有效
function checkStatus() {
  const startTime = localStorage.getItem('startTime')
  // 无历史记录直接返回默认状态
  if(!startTime) return
  const passedTime = Date.now() - Number(startTime)
  // 仍在有效期内，恢复效果并启动剩余时长倒计时
  if(passedTime < LIMIT) {
    setStatusValid()
    timer = setTimeout(resetStatus, LIMIT - passedTime)
  } else {
    // 已过期，清除旧存储恢复默认状态
    resetStatus()
  }
}

逻辑说明 #

• 点击按钮后同时存储倒计时起始时间戳，页面每次加载都会先校验当前时间和存储的起始时间差，判断是否还在5分钟有效期内
• 如果刷新时还在有效期，会自动启动剩余时长的倒计时，到期后自动清除存储、重置所有状态
• 定时器变量提为全局变量，可正常执行清除操作

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