如何在多标签页间同步JavaScript会话计时器？

核心问题分析 #

你遇到的问题根源在于每个标签页都独立修改localStorage中的剩余计时值，5个标签页同时执行减1操作，导致每秒实际减少5秒。另外，登出提示仅在当前触发的标签页显示，未同步到其他标签页。

解决方案思路 #

1. 存储到期时间戳而非剩余秒数：让所有标签页共享同一个"到期时间点"，各自计算剩余时间，避免多标签页同时修改存储值。
2. 利用storage事件同步状态：当某一标签页检测到会话过期时，通过修改localStorage标记触发其他标签页的storage事件，同步弹出登出提示。

具体实现代码 #

1. 初始化会话配置

// 定义会话有效期（示例为30分钟，单位：毫秒）
const SESSION_DURATION = 1800000;

// 初始化到期时间戳：如果没有则设置新的，已有则复用
let expiryTimestamp = localStorage.getItem('sessionExpiry');
if (!expiryTimestamp) {
  expiryTimestamp = Date.now() + SESSION_DURATION;
  localStorage.setItem('sessionExpiry', expiryTimestamp);
}

// 初始化过期状态标记
if (!localStorage.getItem('sessionExpired')) {
  localStorage.setItem('sessionExpired', 'false');
}

2. 会话状态检查逻辑

每个标签页独立运行检查，但仅读取存储的时间戳，不修改：

function checkSessionStatus() {
  // 先检查是否已被其他标签页标记为过期
  const isExpired = localStorage.getItem('sessionExpired') === 'true';
  if (isExpired) {
    showLogoutPrompt();
    return;
  }

  const currentTime = Date.now();
  const remainingTime = parseInt(localStorage.getItem('sessionExpiry')) - currentTime;

  if (remainingTime <= 0) {
    // 标记会话过期，触发其他标签页的storage事件
    localStorage.setItem('sessionExpired', 'true');
    showLogoutPrompt();
  } else {
    // 优化检查频率：剩余时间大于1分钟则每分钟查一次，否则每秒查一次
    const checkInterval = remainingTime > 60000 ? 60000 : 1000;
    setTimeout(checkSessionStatus, checkInterval);
  }
}

// 自定义登出提示函数
function showLogoutPrompt() {
  // 替换为你的实际提示逻辑（如模态框、alert）
  if (confirm('会话已过期，请重新登录！')) {
    // 执行登出操作
    window.location.href = '/login';
    // 清除会话存储
    localStorage.removeItem('sessionExpiry');
    localStorage.removeItem('sessionExpired');
  }
}

// 启动检查
checkSessionStatus();

3. 监听跨标签页状态变化

通过storage事件监听其他标签页的存储修改，同步提示：

window.addEventListener('storage', (event) => {
  // 仅处理会话过期标记的变化
  if (event.key === 'sessionExpired' && event.newValue === 'true') {
    showLogoutPrompt();
  }
});

额外注意事项 #

• 用户重新登录时，务必重置sessionExpiry为新的时间戳，并将sessionExpired设为false，确保所有标签页恢复正常计时。
• 避免在定时器中直接修改sessionExpiry，所有标签页仅读取该值，仅初始化或登录时更新。
• 可根据业务需求调整检查频率，平衡性能和实时性。

内容的提问来源于stack exchange，提问作者Ali Hamza Rao