JavaScript计数器页面刷新后保留数值的实现方案咨询

核心优化方向 #

• 放弃存储计数器实时数值，转而存储当前状态的起始时间戳和状态标识——通过当前时间与起始时间的差值计算时长，既精准又减少本地存储操作
• 给状态变更事件增加过滤逻辑，区分「用户主动切换状态」和「页面刷新时的临时状态跳转」

具体实现步骤 #

1. 调整本地存储结构 #

不再存储时分秒字符串，而是存储包含状态和起始时间的JSON对象：

// 记录新状态的起始时刻
function saveSessionState(state) {
  localStorage.setItem('fop2_session', JSON.stringify({
    state: state,
    startTime: Date.now()
  }));
}

2. 修改状态变更处理函数 #

在handlePresenceChange中加入判断，过滤页面刷新导致的临时Available状态切换：

function handlePresenceChange(newState) {
  const savedSession = JSON.parse(localStorage.getItem('fop2_session')) || {};
  const lastState = savedSession.state;
  const lastChangeTime = savedSession.startTime || 0;
  const timeDiff = Date.now() - lastChangeTime;

  // 判定是否为刷新时的临时切换：
  // 1. 新状态是Available，但上次状态不是Available
  // 2. 两次状态变更间隔小于1秒（可根据实际情况调整阈值）
  const isTempRefresh = newState === 'Available' && lastState !== 'Available' && timeDiff < 1000;

  if (!isTempRefresh) {
    // 真实状态变更：重置计数器并记录新状态
    resetCounter();
    saveSessionState(newState);
    startCounter(Date.now());
  } else {
    // 忽略临时切换，恢复之前的状态计时
    if (savedSession.startTime) {
      startCounter(savedSession.startTime);
    }
  }
}

3. 页面加载时恢复计时 #

页面初始化时读取本地存储，自动恢复对应状态的计数器：

window.addEventListener('load', () => {
  const savedSession = JSON.parse(localStorage.getItem('fop2_session'));
  if (savedSession?.startTime) {
    // 计算已流逝的时间并更新显示
    const elapsedMs = Date.now() - savedSession.startTime;
    updateCounterDisplay(elapsedMs);
    // 继续计时
    startCounter(savedSession.startTime);
  } else {
    // 无保存数据，初始化计数器为0
    resetCounter();
    saveSessionState('Available'); // 初始状态根据实际情况调整
    startCounter(Date.now());
  }
});

4. 辅助函数示例 #

// 重置计数器显示和定时器
function resetCounter() {
  const counterEl = document.getElementById('counter');
  counterEl.textContent = '00:00:00';
  if (window.counterInterval) clearInterval(window.counterInterval);
}

// 将毫秒转换为时分秒并更新显示
function updateCounterDisplay(elapsedMs) {
  const hours = Math.floor(elapsedMs / 3600000);
  const minutes = Math.floor((elapsedMs % 3600000) / 60000);
  const seconds = Math.floor((elapsedMs % 60000) / 1000);
  document.getElementById('counter').textContent = 
    `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// 启动计时逻辑
function startCounter(startTime) {
  window.counterInterval = setInterval(() => {
    const elapsedMs = Date.now() - startTime;
    updateCounterDisplay(elapsedMs);
  }, 1000);
}

关键说明 #

• 存储起始时间而非实时计数器值，避免了频繁写入localStorage的性能损耗，同时计算结果更准确
• 通过时间差和状态对比过滤刷新时的临时状态跳转，彻底解决了刷新重置计数器的问题
• 页面加载时自动恢复对应状态的计时，完全匹配你描述的业务场景

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