如何实现HTML网页浏览历史记录列表功能？

本文共计1109个文字，预计阅读时间需要5分钟。

浏览器历史记录并非依赖于读取实现，而是基于写入和管理来实现的。

使用`history.pushState()`方法会新增一条历史记录，用户点击后退按钮可以回到上一个状态；

javascripthistory.pushState();

使用`history.replaceState()`方法则是替换当前条目，不会增加历史记录长度，适用于更新URL但不希望用户后退回到不同参数页面的情况。

常见错误：用 pushState 处理表单提交后的跳转，结果用户狂点后退，反复触发相同逻辑。应该先判断是否已有对应状态，或改用 replaceState 避免冗余。

• 路由类场景（如 SPA 页面切换）——优先 pushState
• URL 参数微调（如分页、排序、搜索关键词）——优先 replaceState
• 两者第一个参数都是 state 对象，必须是可序列化的，不能传函数或 DOM 节点
• state 对象大小有浏览器限制（Chrome 约 640KB），超限会静默失败，不报错

监听 popstate 事件时为什么没触发

popstate 只在用户点击前进/后退按钮、或调用 history.back()/history.forward() 时触发，**不会**因 pushState/replaceState 调用而触发。这是最常被误解的一点。

另一个坑：页面首次加载时，即使 URL 带有 state，也不会触发 popstate。