浏览器无法获取完整历史记录，window.history受隐私限制只读；history.length非真实条数，history.state无url信息；需用sessionstorage手动记录足迹。
浏览器本身不提供可读取的完整历史记录页，window.history 是只读且受隐私限制的——你无法拿到用户访问过的 URL 列表、时间戳或跳转顺序。所谓“历史记录页”，只能是你自己主动记录并渲染的足迹。
为什么 history.length 和 history.state 都不能当历史列表用
history.length 返回的是当前会话中「可前进/后退的步数」，不是真实访问条数。Chrome 隐私模式下恒为 1，iOS WebView 中常为 0；history.state 仅反映最近一次 pushState 或 replaceState 写入的状态对象，首次加载页面时为空，且不包含 URL 信息。
常见错误现象：
- 写
console.log(history[0])报错或返回undefined - 遍历
history对象发现只有length、state、back等方法和属性，没有历史条目数组 - 在新标签页里试图读取父页历史，结果完全隔离、一无所获
用 sessionStorage 实现轻量级足迹页（关掉标签即清空）
适合内部工具、调试面板、无服务端的离线应用。每次跳转前手动存一条，页面加载后读取渲染。
实操要点：
- 用
sessionStorage而非localStorage：符合“足迹”的临时语义，关闭 tab 自动清理 - 记录结构建议为数组，每项含
url、title、timestamp - 避免重复：只比对上一条
url是否相同，防止连点同一链接堆叠多条 - URL 截断防溢出：
url.substring(0, 37) + '…'，优先保留origin + pathname，丢弃search和hash
简短示例（跳转并记录）：
function goTo(url) {
const list = JSON.parse(sessionStorage.getItem('visitHistory') || '[]');
if (list.length === 0 || list[list.length - 1].url !== url) {
list.push({
url,
title: document.title,
timestamp: Date.now()
});
sessionStorage.setItem('visitHistory', JSON.stringify(list));
}
location.href = url;
}
渲染历史列表时必须处理的三个安全与显示问题
直接把 location.href 插入 DOM 有 XSS 风险，长 URL 会撑破布局，毫秒时间戳也不适合直接展示。
正确做法：
- URL 安全截取：
new URL(url).origin + new URL(url).pathname剥离 query 和 hash - 长度控制：
url.length > 40 ? url.substring(0, 37) + '…' : url - 时间格式化：
new Date(ts).toLocaleTimeString()，别用Date.now()原值 - 渲染方式：用
textContent替代innerHTML，彻底规避 XSS
真正容易被忽略的点是：你永远没法知道用户“从哪来”。popstate 不告诉你来源 URL，document.referrer 在跨域或隐私模式下为空，performance.navigation 已废弃。所有“历史”都得从你第一次调用 goTo 或 logVisit 开始算起——没记录，就没有历史。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
