如何在LocalStorage中存储时间戳并计算时间差以实现倒计时？

原代码存在的问题 #

• 函数名拼写错误：funcion 需改为 function
• 存储日期字符串而非时间戳，虽JS支持日期对象与字符串相减，但直接存储数字类型的时间戳更高效
• 未处理LocalStorage中无初始值的边界情况，会导致计算差值时出现NaN
• 仅计算了时间差，未将差值转换为倒计时所需的时分秒格式

修正后的完整实现代码 #

// 存储初始时间戳到LocalStorage
function setCountdownStartTime() {
  // 存储当前时间的毫秒级时间戳（转为字符串存入LocalStorage）
  localStorage.setItem("countDown", Date.now().toString());
}

// 从LocalStorage获取初始时间戳
function getCountdownStartTime() {
  const storedTime = localStorage.getItem("countDown");
  // 处理无存储值的情况，返回null避免后续计算错误
  return storedTime ? parseInt(storedTime, 10) : null;
}

// 计算并格式化倒计时
function getFormattedCountdown() {
  const startTime = getCountdownStartTime();
  if (!startTime) {
    return "请先设置倒计时起点";
  }
  
  const now = Date.now();
  let diff = now - startTime;
  
  // 处理本地时间被手动修改导致时间差为负的情况
  if (diff < 0) diff = 0;
  
  // 转换为时分秒格式
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
  
  // 补零格式化，保证两位数展示
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// 示例使用：可在页面加载或按钮点击时调用，设置倒计时起点
// setCountdownStartTime();

// 获取并打印格式化后的倒计时
console.log(getFormattedCountdown());

关键说明 #

• 使用Date.now()获取毫秒级时间戳，存储为字符串（LocalStorage仅支持字符串存储），读取时转回数字类型
• 增加边界处理逻辑，避免无初始值时出现计算错误
• 将原始时间差转换为时分秒的格式化字符串，更贴合倒计时的展示需求
• 若需要实时刷新倒计时，可配合setInterval定时调用getFormattedCountdown()更新显示

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