如何在sessionStorage中持久化保存startTime以计算页面重载耗时

核心逻辑：优先读取sessionStorage中已有的startTime，仅在不存在时才初始化新的时间戳，这样就能保证页面重载后startTime不会被覆盖，实现会话内的持久化（直到标签页关闭）。

注意：不要存储toTimeString()返回的字符串，直接存储Date.getTime()的数字时间戳——字符串无法直接用于时间差计算，数字格式更高效便捷。

完整代码实现 #

// 页面DOM加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 从sessionStorage读取已有的startTime
  let startTime = sessionStorage.getItem('startTime');
  
  if (!startTime) {
    // 首次加载页面：初始化startTime为当前时间戳（转成字符串存储，因为sessionStorage仅支持字符串）
    startTime = new Date().getTime().toString();
    sessionStorage.setItem('startTime', startTime);
    console.log('首次加载，已初始化startTime');
  } else {
    // 页面重载：计算从首次加载到现在的耗时
    const currentTime = new Date().getTime();
    const elapsedSeconds = (currentTime - parseInt(startTime)) / 1000; // 转换为秒
    console.log(`页面重载后，距离首次加载已过去 ${elapsedSeconds.toFixed(2)} 秒`);
  }

  // 按需更新newTime（比如记录当前操作的时间点）
  const newTime = new Date().getTime().toString();
  sessionStorage.setItem('newTime', newTime);
});

关键细节说明 #

• 用DOMContentLoaded事件触发逻辑，确保页面DOM就绪后再操作sessionStorage，避免执行时机过早导致的问题
• sessionStorage的存储和读取都基于字符串，所以时间戳需要转成字符串存储，计算时再转回整数
• startTime只会在首次加载时初始化，后续页面重载都会复用之前存储的值，完美实现你需要的持久化效果

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