JS获取验证码后倒计时不受页面刷新及关闭影响前端代码

在前端实现倒计时的过程中，如果要避免页面刷新和关闭对倒计时的影响，可以使用 `localStorage` 来存储验证码的过期时间，同时在页面加载完成时读取 `localStorage` 中的值，然后根据当前时间和过期时间计算倒计时剩余时间，再通过定时器来更新倒计时的显示。

以下是一个简单的示例代码，用于演示如何在前端获取验证码后实现倒计时不受页面刷新及关闭的影响：

// 获取验证码的逻辑
function getVerificationCode() {
  // 发送验证码的请求
  // ...

  // 获取验证码过期时间
  let expireTime = Date.now() + 300000; // 假设验证码5分钟后过期

  // 存储验证码过期时间到localStorage
  localStorage.setItem('expireTime', expireTime);

  // 更新倒计时的显示
  updateCountdown();
}

// 更新倒计时的显示
function updateCountdown() {
  // 读取验证码过期时间
  let expireTime = parseInt(localStorage.getItem('expireTime'));

  // 计算倒计时的剩余时间
  let remainingTime = Math.max(0, Math.floor((expireTime - Date.now()) / 1000));

  // 更新倒计时的显示
  $('#countdown').text(`剩余 ${remainingTime} 秒`);

  // 如果倒计时未结束，继续更新倒计时的显示
  if (remainingTime > 0) {
    setTimeout(updateCountdown, 1000);
  }
}

// 页面加载完成后，更新倒计时的显示
$(document).ready(() => {
  updateCountdown();
});

在上面的代码中，我们在获取验证码后，使用 `localStorage` 来存储验证码的过期时间，并通过 `updateCountdown` 函数来更新倒计时的显示。在每次更新倒计时的显示时，我们首先读取 `localStorage` 中的过期时间，然后计算剩余时间，并通过 `setTimeout` 函数来定时更新倒计时的显示。在页面加载完成后，我们调用 `updateCountdown` 函数来更新倒计时的显示。

需要注意的是，由于 `localStorage` 中存储的数据可以被用户手动清除，因此在实际应用中，需要对用户手动清除 `localStorage` 的情况进行处理，例如在读取 `localStorage` 中的值时，需要判断是否存在该值，如果不存在则重新发送验证码。