本文提供一种轻量、准确、跨页面的用户行为时间追踪方案，利用 load 和 beforeunload 事件精确捕获单页停留时长，并持久化至 localStorage，彻底规避定时器漂移与页面跳转丢失问题。
本文提供一种轻量、准确、跨页面的用户行为时间追踪方案，利用 load 和 beforeunload 事件精确捕获单页停留时长，并持久化至 localstorage，彻底规避定时器漂移与页面跳转丢失问题。
要真正实现“用户在 shopping 页面停留多久、在 about 页面停留多久”的精准统计，关键在于避免依赖前端 setInterval 定时器——正如提问者所遇：setInterval 在页面失焦、后台运行或系统负载高时会严重滞后（如 2 秒实际只触发 1 次），导致计时不准确；且页面跳转后定时器未清理，还会引发内存泄漏和数据错乱。
✅ 正确思路是：每个页面独立记录自身生命周期。即：
- 当某页面（如
shopping.html）完成加载（load事件）时，记录当前时间戳为startTime； - 当用户即将离开该页面（
beforeunload事件触发时），立即记录stopTime，并计算差值存入localStorage，键名按页面类型区分（如"time_shopping"）； - 所有页面共用同一套逻辑，无需全局状态管理或跨页通信。
以下是可直接集成到任意业务页面（如 shopping.html、about.html）的标准化追踪脚本：
<!-- 在 shopping.html 的 <head> 或 <body> 底部添加 -->
<script>
let startTime = null;
// 页面加载完成时启动计时
window.addEventListener('load', () => {
startTime = Date.now();
});
// 页面即将卸载（关闭/跳转）时保存时长
window.addEventListener('beforeunload', () => {
if (startTime) {
const elapsedMs = Date.now() - startTime;
const elapsedSec = Math.round(elapsedMs / 1000); // 四舍五入到秒，更符合人眼感知
localStorage.setItem('time_shopping', JSON.stringify({
seconds: elapsedSec,
timestamp: Date.now() // 可选：记录本次访问结束时间，便于后续分析
}));
}
});
</script>
? 对应其他页面只需修改键名即可：
-
about.html→localStorage.setItem('time_about', ...) -
pictures.html→localStorage.setItem('time_pictures', ...) -
tracker.html→localStorage.setItem('time_tracker', ...)
在 tracker.html 中，你可统一读取并展示所有数据：
<div id="usageReport"></div>
<script>
function formatDuration(seconds) {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
return `${h}h ${m}m ${s}s`;
}
function loadUsageReport() {
const pages = [
{ key: 'time_shopping', label: 'Shopping' },
{ key: 'time_about', label: 'About' },
{ key: 'time_pictures', label: 'Pictures' },
{ key: 'time_tracker', label: 'Tracker' }
];
const reportHTML = pages.map(({ key, label }) => {
const data = localStorage.getItem(key);
const seconds = data ? JSON.parse(data).seconds : 0;
return `<div><strong>${label}: ${formatDuration(seconds)}`;
}).join('');
document.getElementById('usageReport').innerHTML = reportHTML;
}
// 页面加载后立即渲染统计
document.addEventListener('DOMContentLoaded', loadUsageReport);
</script>
⚠️ 重要注意事项：
-
beforeunload是唯一可靠捕获“页面离开瞬间”的标准事件，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge）； - 不要使用
visibilitychange或pagehide替代：它们无法区分用户是切换标签页还是真正离开网站，且pagehide在部分 iOS Safari 中存在兼容性问题； -
localStorage存储的是字符串，务必用JSON.stringify()和JSON.parse()处理结构化数据，避免数值被意外转为字符串导致计算错误； - 若需更高精度（毫秒级）或支持离线同步，可升级为 IndexedDB + Service Worker 方案，但对大多数场景，
localStorage已足够稳定高效。
该方案零依赖、无性能开销、不干扰原有逻辑，且天然支持多标签页隔离（每个页面独立计时），是真实业务中经验证的最优实践。
