倒计时缓存时间问题总结

业务场景：

在详情页点击按钮之后，按钮禁用，过3s后按钮才能点击。

我用的vue，大列表点进去的详情页。

 1 <el-button" @click="checkBtn" :disabled="checkdisabled">点此检测 </el-button>

checkBtn() { //点击事件
  this.countDown(180);
  localStorage.setItem(id, Date.now()) //把点击按钮时的时间存到localStorage
}，
countDown(time) {
  const timeNum = time //倒计时
  this.checkdisabled = true //禁用
  const timer = setInterval(() => { //倒计时
    this.timeNum--
    if (this.timeNum <= 0) { //达到3分钟时停止倒计时
      clearInterval(timer)
      this.checkdisabled = false
      localStorage.removeItem(id)
    }
  }, 1000)
}，
mounted() {
  const preTime = localStorage.getItem(id) //获取点击按钮时的时间
  if (!preTime) return
  const timeNum = parseInt((Date.now() - preTime) / 1000) //当前时间跟点击按钮时候的时间差，并算成s
  if (timeNum >= 180) {
    如果这个时间差大于180s， 则证明过了3分钟，
    localStorage.removeItem(id)
  } else { //否则，将剩余的时间传进去，继续倒计时
    this.countDown(180 - timeNum)
  }
}

需要注意的是， 把时间存localStorage里是为了， 去了别的页面时依然计算倒计时。
最后的落幕： 推荐一下腾讯云的服务器， 搞活动真的很便宜啦， 3 折3折
https: //cloud.tencent.com/redirect.php?redirect=1014&cps_key=0fe886ef07870a50bf9a175e21a71046&from=console
阿里云的对比一下下啦， 虽然2折
https: //promotion.aliyun.com/ntms/act/qwbk.html?userCode=d3wdmq73