用 localstorage 实现最近访问菜单需标准化url（origin+pathname）、限制10条、spa监听路由变化，点击菜单时先savetohistory再跳转，避免sessionstorage因关闭丢失且不跨标签页。
怎么用 localStorage 实现“最近访问菜单”
直接存 URL 和标题就行，不用后端、不依赖 Cookie，页面刷新也不丢。关键是要在每次跳转前触发记录，且控制条目数量避免无限增长。
常见错误是只存 window.location.href，结果带了 query 参数或 hash，导致同一页被记成多条；还有人用 pushState 后没手动触发记录，漏掉 SPA 内部路由跳转。
- 每次进入新页面时调用
saveToHistory(url, title)，URL 建议用new URL(url).origin + new URL(url).pathname标准化 - 用
JSON.parse(localStorage.getItem('menuHistory') || '[]')读取，限制最多存 10 条，超出就.shift()删除最老的 - SPA（如 Vue/React）需监听路由变化：Vue Router 用
router.afterEach，React Router v6 用useLocation+useEffect
如何渲染成可点击的菜单列表
DOM 渲染本身很简单，但容易忽略两点：一是空状态处理，二是点击后要更新历史顺序（最新访问置顶）。
典型错误是点击菜单项后只是 window.location.href = item.url，没同步调用 saveToHistory，导致点完“回到上一条”，它又变成第二条——顺序错乱。
- 渲染时遍历
historyList，每项生成@#@#@#@#@#@#@#@#@#@0，加target="_self"避免意外新开页 - 点击事件里先
event.preventDefault()，再saveToHistory(item.url, item.title)，最后window.location.assign(item.url) - 加个“清空”按钮，执行
localStorage.removeItem('menuHistory')，别用clear()全局清空，会误删其他数据
为什么不能用 sessionStorage 替代 localStorage
sessionStorage 页面关掉就没了，不符合“历史记录”预期。用户开多个标签页时，sessionStorage 还是各自独立的，A 标签页访问的页面不会出现在 B 标签页的菜单里。
更隐蔽的问题是：有些开发者想“只记当前会话”，结果用户刷新页面后历史全空，以为功能坏了。
-
localStorage是跨标签页共享的，适合全局最近访问场景 - 如果真要区分会话（比如临时调试菜单），必须显式加前缀，如
sessionMenuHistory_${Date.now()}，并自行管理过期 - 注意浏览器隐私模式下
localStorage可能被禁用，需加 try/catch 包裹写入逻辑
移动端点击菜单后返回原页面的体验问题
直接 window.location.assign() 会导致 Android 微信内嵌浏览器“无法返回上一页”，因为历史栈被覆盖了。这不是 bug，是内核对 assign 的特殊处理。
真实场景中，用户点完“最近访问的设置页”，还想按手机返回键回到刚才的列表页，但发现回不去了。
- 改用
window.location.replace(url)更糟，它连当前页都从历史栈删了 - 正确做法是：仍用
window.location.href = url，但确保目标页有完整导航结构，或在菜单页加“返回”按钮，用history.back() - 若需强控制，可在跳转前把当前页路径存进
sessionStorage.returnUrl，目标页 onload 后读取并渲染返回链接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
