谷歌Chrome省电模式下如何保存窗口/标签页的打开时间？

针对Chrome省电特性清理会话数据、LocalStorage无法区分同URL多标签的问题，推荐以下几种可行方案：

方案1：IndexedDB + 标签页唯一标识 #

IndexedDB是浏览器持久化存储方案，不会被Chrome的省电会话清理机制影响，且可以通过唯一ID区分同URL的不同标签页：

• 页面加载时生成唯一标识（如crypto.randomUUID()），存入内存变量；
• 检查IndexedDB中是否存在该标识对应的初始时间记录：
  • 若不存在，写入当前时间作为初始打开时间；
  • 若存在，直接读取该时间即可。

示例代码：

// 生成标签页唯一ID
const tabId = crypto.randomUUID();
let initialLoadTime;

// 初始化IndexedDB连接
function initDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('TabLoadTimes', 1);
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      db.createObjectStore('loadTimes', { keyPath: 'tabId' });
    };
    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = (e) => reject(e.target.error);
  });
}

// 获取或写入初始加载时间
async function getInitialLoadTime() {
  const db = await initDB();
  const transaction = db.transaction('loadTimes', 'readwrite');
  const store = transaction.objectStore('loadTimes');
  
  const existingRecord = await store.get(tabId);
  if (existingRecord) {
    initialLoadTime = existingRecord.time;
  } else {
    initialLoadTime = new Date().toISOString();
    await store.add({ tabId, time: initialLoadTime });
  }
  
  // 标签页关闭时删除对应记录（可选，避免存储冗余）
  window.addEventListener('beforeunload', async () => {
    const db = await initDB();
    const transaction = db.transaction('loadTimes', 'readwrite');
    await transaction.objectStore('loadTimes').delete(tabId);
  });
  
  return initialLoadTime;
}

// 调用使用
getInitialLoadTime().then(time => console.log('初始打开时间:', time));

方案2：利用window.name属性（轻量临时方案） #

window.name在标签页生命周期内（未关闭前）会持续保留，不受Chrome省电清理SessionStorage的影响：

• 页面加载时，若window.name未存储初始时间，就写入当前时间；
• 若已存储，则直接读取，不做覆盖。

示例代码：

let initialLoadTime;

if (!window.name) {
  initialLoadTime = new Date().toISOString();
  window.name = initialLoadTime;
} else {
  initialLoadTime = window.name;
}

console.log('初始打开时间:', initialLoadTime);

局限性：若标签页导航到其他域名后再返回，window.name仍会保留，但如果页面被强制刷新且浏览器重置了window.name（极端情况），会失效，适合简单场景。

方案3：SessionStorage + window.name 双备份 #

结合两者的优势，做 fallback 处理：

• 优先从SessionStorage读取初始时间；
• 若SessionStorage无数据，检查window.name；
• 若两者都无，生成初始时间并同时存入SessionStorage和window.name；
• 当SessionStorage被清理后，页面恢复时从window.name读取并写回SessionStorage，避免被覆盖。

示例代码：

let initialLoadTime = sessionStorage.getItem('pageLoadTime');

if (!initialLoadTime) {
  initialLoadTime = window.name || new Date().toISOString();
  sessionStorage.setItem('pageLoadTime', initialLoadTime);
  window.name = initialLoadTime;
}

console.log('初始打开时间:', initialLoadTime);

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