浏览器出于隐私强制限制，window.history 不提供历史条目列表，也无法读取 URL、时间戳或跳转顺序；唯一可行方案是主动在每次加载时用 localStorage/sessionStorage 自行记录访问信息。
用 window.history 读不到访问记录？别试了
浏览器出于隐私强制限制，window.history 对象**不提供历史条目列表**，也**无法读取 URL、时间戳或跳转顺序**。调用 history.length 只返回当前会话中可前进/后退的步数（通常 ≥1），但具体地址完全不可见。这是所有现代浏览器的统一策略，不是 bug，也不是权限没开。
常见错误现象：
– 写 console.log(history.state) 发现是 null 或空对象
– 尝试 history[0] 或遍历 history 报错或返回 undefined
– 在新标签页里以为能拿到父页历史，实际完全隔离
想存页面访问时间线？自己记，别依赖浏览器
唯一可靠方式是主动在每次页面加载时写入本地记录。核心逻辑：进入页面 → 生成时间戳 → 存到 localStorage 或 sessionStorage → 读取时解析数组。
实操建议：
– 用 performance.now() 或 Date.now() 记毫秒级时间，避免时区干扰
– 每次存一个对象，如 {url: location.href, ts: Date.now(), title: document.title}
– 控制数量，比如只保留最近 50 条，用 Array.slice(-50) 截取
– 注意 localStorage 跨标签页共享，sessionStorage 仅限当前 tab
立即学习“前端免费学习笔记（深入）”；
简短示例：
const record = { url: location.href, ts: Date.now(), title: document.title };
const list = JSON.parse(localStorage.getItem('pageTimeline') || '[]');
list.push(record);
localStorage.setItem('pageTimeline', JSON.stringify(list.slice(-50)));
显示时间线列表时，注意 URL 截断和安全过滤
直接把 location.href 渲染进 DOM 有 XSS 风险；长 URL 也会撑破布局。必须处理。
使用场景：
– 后台管理页的调试面板
– 内部工具的用户行为回溯界面
– 无服务端的离线笔记类应用
实操建议：
– 用 new URL(url).origin + new URL(url).pathname 剥离 query 和 hash，防参数污染
– 超过 40 字符用 url.substring(0, 37) + '...' 截断
– 渲染前用 DOMPurify.sanitize() 过滤（若引入了该库），或纯文本插入避免 innerHTML
– 时间戳转为 new Date(ts).toLocaleTimeString()，别直接展示毫秒数
Service Worker 缓存历史？不现实
有人想用 SW 拦截 fetch、自动存访问日志——但 SW **无法感知页面级导航事件**（如用户点链接、按后退键），它只响应网络请求。用户打开一个已缓存的 HTML 页面，SW 根本不会触发，更不会知道“这次是第几次来”。
性能与兼容性影响：
– 强行在 SW 里监听 fetch 并过滤 HTML 请求，会拖慢首屏，尤其弱网下
– clients.matchAll() 查不到跨域 tab，也拿不到历史栈信息
– iOS Safari 的 SW 行为不稳定，部分版本不触发 install 后的逻辑
结论很直白：这个思路从底层机制上就行不通，别花时间绕。
真正容易被忽略的是时间精度和存储容量。用户可能连续刷 10 次页面，Date.now() 在毫秒级可能重复；而 localStorage 一般只有 5–10MB 上限，存太多对象会静默失败。得加 try/catch 和长度校验。
