纯前端无法读取浏览器真实历史，只能主动记录跳转：每次调用 goto() 或点击链接时，将 url、标题、时间存入 sessionstorage，页面加载时读取并渲染；需去重、过滤无效链接，不可依赖 window.history.length 或 popstate 获取完整历史。
如何用 JavaScript 模拟浏览器历史足迹（不依赖服务端）
纯前端做不到真正意义上的“浏览器足迹记录”——window.history 是只读的，无法读取用户访问过的 URL 列表。所谓“足迹”，只能是你自己主动记录的跳转行为，比如点击链接、调用 history.pushState() 或 location.href 时手动存下来。
常见错误是试图用 performance.navigation（已废弃）或监听 popstate 事件来反推历史，但这些只能捕获当前页面的导航来源或前进/后退动作，拿不到完整路径列表。
- 必须在每次你控制的跳转前，把目标 URL 存进
localStorage或sessionStorage - 推荐用
sessionStorage：关掉标签页自动清空，更符合“足迹”的临时性语义 - 避免重复记录：同一 URL 连续跳转两次，应去重（比如比较上一条是否相同）
- 记录结构建议用数组，每项含
url、title（可选）、timestamp（可选）
用 sessionStorage 实现可回溯的足迹列表
下面是一个最小可行实现：每次调用自定义跳转函数时写入，页面加载时读取并渲染。
// 记录一次足迹
function logVisit(url, title = document.title) {
const list = JSON.parse(sessionStorage.getItem('visitHistory') || '[]');
// 避免重复（只比对上一条）
if (list.length === 0 || list[list.length - 1].url !== url) {
list.push({ url, title, timestamp: Date.now() });
sessionStorage.setItem('visitHistory', JSON.stringify(list));
}
}
<p>// 跳转并记录（替代直接改 location.href）
function goTo(url) {
logVisit(url);
location.href = url;
}</p><p>// 页面加载后读取并渲染（例如插入到 </p><ol id="footprint"></ol>）
document.addEventListener('DOMContentLoaded', () => {
const list = JSON.parse(sessionStorage.getItem('visitHistory') || '[]');
const el = document.getElementById('footprint');
if (el && list.length) {
el.innerHTML = list.map((item, i) =>
<code><li>
<a href="%24%7Bitem.url%7D">${item.title || item.url}</a> <small>(${new Date(item.timestamp).toLocaleTimeString()})</small>
</li></code>
).join('');
}
});
注意：sessionStorage 同源隔离，不同子域名或协议间不共享；若需跨标签页同步，得用 localStorage + storage 事件监听，但会增加复杂度。
为什么不能用 window.history.length 或 history.state 做判断
window.history.length 只返回当前会话中历史条目总数（包括初始页面），它不暴露具体 URL，也无法区分是前进、后退还是刷新；history.state 仅保存你用 pushState/replaceState 主动设置的对象，和浏览器真实历史无关。
- Chrome/Firefox 对
history.length的返回值有最小值限制（通常 ≥ 1），不能用于判断“是否首次访问” - 监听
popstate只能知道用户点了后退/前进按钮，但不知道退到了哪一页（event.state是空的，除非你自己设过） - 没有 API 能列出
history[0]、history[1]… 所以任何“遍历历史”的想法都走不通
点击链接时自动记录（无需改所有 href）
如果项目已有大量 <a href="xxx"></a>，不想逐个改成 goTo()，可以用事件代理：
document.addEventListener('click', function(e) {
const link = e.target.closest('a[href]');
if (link && link.href && !link.hasAttribute('data-no-track')) {
e.preventDefault();
logVisit(link.href, link.textContent.trim() || link.href);
location.href = link.href;
}
});
加 data-no-track 属性可排除某些链接（如外链、下载链接）；注意要过滤掉空 href、锚点链接（#section）、javascript:void(0) 等无效跳转。
真正的难点不在记录，而在于“什么算一次有效足迹”——是每次 URL 变化？还是仅限主内容区切换？这个边界得根据你的产品逻辑定，代码只是工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
