浏览器禁止读取真实浏览历史，history API 仅支持有限状态管理；动态内容历史需手动记录，推荐用 sessionStorage 存结构化数据（如 {id, type, title, timestamp}），长度限30条，首次加载需主动渲染。
浏览器根本不允许读取真实浏览历史
你无法通过 window.history 拿到用户访问过的 URL 列表——这不是权限没开，而是所有现代浏览器的强制隐私策略。调用 history[0] 会报错或返回 undefined；history.length 只是当前可前进/后退的步数（Chrome 隐私模式下恒为 1）；history.state 仅反映最近一次 pushState() 写入的状态，不带 URL，首次加载时还是 null。
必须自己在跳转前手动记录动态内容
所谓“动态内容历史”，比如 SPA 中路由变化后的文章 ID、商品 SKU、搜索关键词等，得靠你在触发跳转那一刻主动存。关键不是“监听页面”，而是“控制跳转入口”。
- 所有自定义跳转函数（如
goTo('/article?id=123')）里，先调用记录逻辑，再执行跳转 - 对
标签统一加data-track="true"，用事件委托捕获点击并存event.target.href - 若用 React/Vue，应在路由守卫（如
beforeEach）中写入，而非依赖popstate - 避免记录
file://、chrome-extension://等非业务协议 URL
用 sessionStorage 存结构化数据，别只存 URL
动态内容的历史价值不在地址本身，而在上下文。比如访问 /product?id=456，你真正需要回溯的是“用户看了什么商品”，所以应存解析后的字段：
- 推荐结构：
{ id: '456', type: 'product', title: '无线耳机 Pro', timestamp: Date.now() } - 用
sessionStorage而非localStorage：关掉标签页自动清空，符合“本次会话足迹”的语义 - 数组长度限制在 30 条以内，用
list.slice(-30)截取，防内存膨胀 - 去重逻辑要宽松：同一
id+ 同一type连续出现才跳过，避免漏掉刷新后重新加载
渲染时别直接插 URL，优先展示业务字段
把原始 location.href 直接塞进 DOM 有 XSS 风险，也难读。渲染列表时应：
- 用
new URL(url).pathname提取路径，再用正则或URLSearchParams解出id和type - 标题优先显示
item.title， fallback 到item.type + ' #' + item.id - 时间戳转成
new Date(item.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) - 点击条目时，不要
location.href = url，而应复现原始行为：比如调用loadProduct(item.id)
最易被忽略的一点：SPA 中首次加载页面时，popstate 不会触发，但你的历史列表可能已经存在——必须在 DOMContentLoaded 里主动读取并渲染，不能只等导航事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
