window.history无法跨标签页读取是因浏览器强制隔离各标签页历史栈，仅暴露当前tab的length；需用localStorage标准化存储URL、标题和时间戳，并在SPA中拦截所有路由跳转入口记录。
为什么 window.history 无法跨标签页读取历史
浏览器对每个标签页的历史栈做了严格隔离，window.history 只能访问当前 tab 的可前进/后退步数（history.length），且不暴露任何 URL 列表。你在 A 标签页调用 history.pushState()，B 标签页完全感知不到——这不是权限问题，而是隐私规范强制要求。
常见错误现象包括：console.log(history[0]) 报错、遍历 history 得到空对象、试图用 document.referrer 获取跨标签来源却返回空字符串或上一域名。
用 localStorage 实现跨标签页共享的足迹记录
sessionStorage 是单标签页作用域，关掉就清空，不适合“完整浏览历史”场景；localStorage 才是跨标签页共享、页面刷新不丢的正确选择。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 每次跳转前标准化 URL：
new URL(url).origin + new URL(url).pathname，去掉search和hash，避免同页面因参数不同被记为多条 - 存入结构统一为数组，每项含
url、title、timestamp，例如：{ url: 'https://example.com/user', title: '用户中心', timestamp: Date.now() } - 限制总量（如最多 50 条），写入前用
list.slice(-50)截取，防爆仓 - 必须加
try/catch包裹写入逻辑——隐私模式下localStorage可能直接不可用
SPA 中如何确保路由跳转也被记录
单页应用里，点击菜单、切换 Tab、执行 router.push() 都不会触发页面刷新，但用户行为确实发生了。如果只在 window.onload 里记录，这些内部跳转会全部漏掉。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
正确做法是拦截所有可控跳转入口：
- Vue Router：用
router.afterEach((to) => saveToHistory(to.fullPath, to.meta.title || document.title)) - React Router v6：用
useLocation+useEffect(() => { saveToHistory(location.pathname, document.title) }, [location]) - 原生 JS：给所有导航链接加
data-history="true"，统一绑定点击事件，在preventDefault()后先调saveToHistory()再手动更新视图
注意：不要依赖 popstate 事件来补录——它只响应浏览器后退/前进动作，不响应主动跳转。
渲染历史列表时必须处理的三个细节
直接把 url 插入 DOM 有 XSS 风险，长 URL 会撑破布局，毫秒时间戳也不适合直接展示。
安全 & 可读性处理建议：
- URL 截断：优先保留 origin + pathname，
url.length > 40 ? url.substring(0, 37) + '…' : url - 时间格式化：
new Date(ts).toLocaleString('zh-CN', { hour12: false })，别用Date.now()原值 - 点击历史项时，必须同步调
saveToHistory(item.url, item.title)，再window.location.assign(item.url)，否则最新访问不会置顶，顺序错乱
最易被忽略的是：移动端微信内嵌浏览器中，直接 assign() 可能导致返回异常，此时应改用 history.replaceState() 先修正当前项，再 pushState() 跳转，确保历史栈连续。
