js定时器刷新后怎么继续计时

JS定时器刷新后继续计时的方法有：使用LocalStorage保存时间、使用SessionStorage保存时间、使用Cookies保存时间、使用后端存储时间。其中，使用LocalStorage保存时间是一种常用且简单的方法，可以有效地在页面刷新后继续计时。

一、使用LocalStorage保存时间

LocalStorage是一种在客户端存储数据的方式，它允许你在用户关闭浏览器后仍然保存数据。通过将定时器的剩余时间保存到LocalStorage中，即使页面刷新后也能恢复计时。以下是详细步骤：

初始化计时器：在页面加载时，检查LocalStorage中是否有保存的时间，如果有则恢复计时。
保存剩余时间：在页面刷新前，将当前剩余时间保存到LocalStorage中。
页面加载后恢复计时：在页面加载时，读取LocalStorage中的时间，并继续计时。

示例代码：

let timer;
let remainingTime = localStorage.getItem('remainingTime') ? parseInt(localStorage.getItem('remainingTime')) : 60; // 默认计时60秒
function startTimer() {
  timer = setInterval(() => {
    remainingTime--;
    console.log(`Remaining time: ${remainingTime} seconds`);
    localStorage.setItem('remainingTime', remainingTime);
    if (remainingTime <= 0) {
      clearInterval(timer);
      localStorage.removeItem('remainingTime');
      console.log('Timer ended');
    }
  }, 1000);
}
window.onload = function() {
  if (remainingTime > 0) {
    startTimer();
  }
};
window.onbeforeunload = function() {
  localStorage.setItem('remainingTime', remainingTime);
};

二、使用SessionStorage保存时间

SessionStorage与LocalStorage类似，但它只在浏览器会话期间有效。适用于需要在同一会话中保存数据的场景。

示例代码：

let timer;
let remainingTime = sessionStorage.getItem('remainingTime') ? parseInt(sessionStorage.getItem('remainingTime')) : 60;
function startTimer() {
  timer = setInterval(() => {
    remainingTime--;
    console.log(`Remaining time: ${remainingTime} seconds`);
    sessionStorage.setItem('remainingTime', remainingTime);
    if (remainingTime <= 0) {
      clearInterval(timer);
      sessionStorage.removeItem('remainingTime');
      console.log('Timer ended');
    }
  }, 1000);
}
window.onload = function() {
  if (remainingTime > 0) {
    startTimer();
  }
};
window.onbeforeunload = function() {
  sessionStorage.setItem('remainingTime', remainingTime);
};

三、使用Cookies保存时间

Cookies可以在客户端存储少量数据，并且可以设置过期时间。适用于需要在多个会话中保存数据的场景。

示例代码：

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
  let nameEQ = name + "=";
  let ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}
let timer;
let remainingTime = getCookie('remainingTime') ? parseInt(getCookie('remainingTime')) : 60;
function startTimer() {
  timer = setInterval(() => {
    remainingTime--;
    console.log(`Remaining time: ${remainingTime} seconds`);
    setCookie('remainingTime', remainingTime, 1);
    if (remainingTime <= 0) {
      clearInterval(timer);
      setCookie('remainingTime', '', -1);
      console.log('Timer ended');
    }
  }, 1000);
}
window.onload = function() {
  if (remainingTime > 0) {
    startTimer();
  }
};
window.onbeforeunload = function() {
  setCookie('remainingTime', remainingTime, 1);
};

四、使用后端存储时间

在某些情况下，使用前端存储可能不够可靠，这时可以选择将时间存储在后端数据库中。通过AJAX请求将时间发送到服务器，并在页面加载时从服务器获取时间。

示例代码：

前端代码：

let timer;
let remainingTime = 60;
function startTimer() {
  timer = setInterval(() => {
    remainingTime--;
    console.log(`Remaining time: ${remainingTime} seconds`);
    updateRemainingTimeOnServer(remainingTime);
    if (remainingTime <= 0) {
      clearInterval(timer);
      console.log('Timer ended');
    }
  }, 1000);
}
function updateRemainingTimeOnServer(time) {
  fetch('/update-time', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ remainingTime: time })
  });
}
window.onload = function() {
  fetch('/get-time')
    .then(response => response.json())
    .then(data => {
      remainingTime = data.remainingTime;
      if (remainingTime > 0) {
        startTimer();
      }
    });
};
window.onbeforeunload = function() {
  updateRemainingTimeOnServer(remainingTime);
};

后端代码（Node.js示例）：

const express = require('express');
const app = express();
let remainingTime = 60;
app.use(express.json());
app.post('/update-time', (req, res) => {
  remainingTime = req.body.remainingTime;
  res.sendStatus 200);
});
app.get('/get-time', (req, res) => {
  res.json({ remainingTime: remainingTime });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

五、总结

通过以上四种方法，可以有效地在页面刷新后继续计时。使用LocalStorage保存时间是一种常用且简单的方法，适合大多数场景。使用SessionStorage保存时间适用于需要在同一会话中保存数据的场景。使用Cookies保存时间适用于需要在多个会话中保存数据的场景。使用后端存储时间适用于需要更高可靠性的场景。根据实际需求选择合适的方法，可以实现页面刷新后继续计时的功能。

相关问答FAQs：

1. 问题： 当页面刷新后，js定时器停止了，如何继续计时？

回答： 页面刷新后，js定时器会停止计时，但是我们可以通过使用本地存储(localStorage或sessionStorage)来保存计时器的状态，以便在页面刷新后继续计时。具体实现步骤如下：

在计时器启动时，使用localStorage.setItem()或sessionStorage.setItem()方法将当前计时器的状态（例如开始时间、已经经过的时间等）保存到本地存储中。
在页面刷新后，通过localStorage.getItem()或sessionStorage.getItem()方法获取之前保存的计时器状态。
根据之前保存的计时器状态，重新设置计时器的初始值，然后继续计时。

示例代码如下：

// 启动计时器
function startTimer() {
  // 保存计时器状态到本地存储
  localStorage.setItem('startTime', new Date().getTime());
  // 其他计时器逻辑...
}

// 页面加载时判断是否有计时器状态
window.onload = function() {
  if (localStorage.getItem('startTime')) {
    // 获取之前保存的计时器状态
    var startTime = parseInt(localStorage.getItem('startTime'));
    var currentTime = new Date().getTime();
    var elapsedTime = currentTime - startTime;
    
    // 根据之前保存的状态重新设置计时器初始值
    // 其他计时器逻辑...
  }
}

2. 问题： 如果用户关闭了浏览器，再次打开页面时如何继续之前的计时器？

回答： 如果用户关闭了浏览器，再次打开页面时，可以通过使用cookie或者服务器端存储来保存计时器的状态，以便在下次打开页面时继续计时。具体实现步骤如下：

在计时器启动时，使用document.cookie来设置一个cookie，将当前计时器的状态（例如开始时间、已经经过的时间等）保存到cookie中。
在页面加载时，通过解析cookie获取之前保存的计时器状态。
根据之前保存的计时器状态，重新设置计时器的初始值，然后继续计时。

示例代码如下：

// 设置cookie
function setTimerCookie() {
  var startTime = new Date().getTime();
  var expires = new Date();
  expires.setTime(expires.getTime() + (24 * 60 * 60 * 1000)); // 设置cookie的过期时间为1天
  document.cookie = 'startTime=' + startTime + '; expires=' + expires.toUTCString() + '; path=/';
  // 其他计时器逻辑...
}

// 页面加载时判断是否有cookie
window.onload = function() {
  var cookies = document.cookie.split(';');
  var startTime = null;
  
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf('startTime=') === 0) {
      startTime = parseInt(cookie.substring('startTime='.length));
      break;
    }
  }
  
  if (startTime) {
    var currentTime = new Date().getTime();
    var elapsedTime = currentTime - startTime;
    
    // 根据之前保存的状态重新设置计时器初始值
    // 其他计时器逻辑...
  }
}

3. 问题： 如果用户切换了浏览器标签，如何保持计时器继续计时？

回答： 当用户切换了浏览器标签，计时器默认会暂停。但是可以通过监听浏览器的可见性事件（visibilitychange）来判断用户是否切换了标签，并在用户切换回当前标签时继续计时。

具体实现步骤如下：

使用document.visibilityState属性获取当前浏览器标签的可见性状态。
监听visibilitychange事件，当浏览器标签可见性状态发生变化时，判断当前标签是否可见。
当标签从不可见变为可见时，重新启动计时器；当标签从可见变为不可见时，暂停计时器。

示例代码如下：

// 启动计时器
function startTimer() {
  // 计时器逻辑...
}

// 判断浏览器标签可见性状态改变时的回调函数
function handleVisibilityChange() {
  if (document.visibilityState === 'visible') {
    // 当标签从不可见变为可见时，重新启动计时器
    startTimer();
  } else {
    // 当标签从可见变为不可见时，暂停计时器
    // 暂停计时器逻辑...
  }
}

// 监听visibilitychange事件
document.addEventListener('visibilitychange', handleVisibilityChange);

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3750716