前言

　　最近在做一个 H5 工具，需要手机号 + 验证码登录，很自然地，点击发送验证码后需要等待一段时间才能重新发送，用于请求节流，避免用户疯狂点击：

　　不过这里其实有个隐藏需求——如果仍然在冷却时间内，那么用户无论是刷新或是关闭页面，再次打开登录弹窗，需要直接展示正确的倒计时状态。

解决方案

使用经典的 localStorage

1. 
   
2. 发送验证码时，将发送时间 (lastSendingTime) 存入 localStorage，并开启 60 秒倒计时。
   
3. 倒计时结束后，清除 localStorage 中的 lastSendingTime。
   
4. 重新进入页面时，若 localStorage 中存有 lastSendingTime，则说明仍处于冷却时间内，那么计算出剩余的倒计时 N，并开启 N 秒倒计时。
   

Talk is cheap, show me the code!

  const [countdown, setCountdown] = useState(60) // 倒计时
const [canSendCode, setCanSendCode] = useState(true) // 控制按钮文案的状态
const [timer, setTimer] = useState() // 定时器 ID

async function sendVerificationCode() {
try {
// network request...
Toast.show({ content: '验证码发送成功' })
startCountdown()
setCanSendCode(false)

    } catch (error) {
setCountdown(0)
setCanSendCode(true)

    }

  }

function startCountdown() {
const nowTime = new Date().getTime()
const lastSendingTime = localStorage.getItem('lastSendingTime')
if (lastSendingTime) {
// 若 localStorage 中存有 lastSendingTime，则说明仍处于冷却时间内，计算出剩余的 countdown
const restCountdown = 60 - parseInt(((nowTime - lastSendingTime) / 1000), 10)
setCountdown(restCountdown <= 0 ? 0 : restCountdown)

    } else {
// 否则说明冷却时间已结束，则 countdown 为 60s，并将发送时间存入 localStorage
setCountdown(60)
localStorage.setItem('lastSendingTime', nowTime)

    }

setTimer(
setInterval(() => {
setCountdown(old => old - 1)

      }, 1000),

    )

  }

// 重新进入页面时，若 localStorage 中存有上次的发送时间，则说明还处于冷却时间内，则调用函数计算剩余倒计时；
// 否则什么也不做
useEffect(() => {
const lastSendingTime = localStorage.getItem('lastSendingTime') 
if (lastSendingTime) {
setCanSendCode(false)
startCountdown()

    }

return () => {
clearInterval(timer)

    }

  }, [])


// 监听倒计时，倒计时结束时:
// * 清空 localStorage 中存储的上次发送时间
// * 清除定时器
// * 重置倒计时
useEffect(() => {
if (countdown <= 0) {
setCanSendCode(true)
localStorage.removeItem('lastSendingTime')
clearInterval(timer)
setCountdown(60)

    }

  }, [countdown])

return (

  {canSendCode ? (
<span onClick={sendVerificationCode}>

      获取验证码
</span>

  ) : (
<span>

      获取验证码({`${countdown}`})
</span>

  )}

)

最终效果

总结

　　一开始感觉这是个很简单的小需求，可能 20min 就写完了，但实际花了两个多小时才把逻辑全部 cover 到，还是不能太自信啊~