应监听pageshow事件并检查persisted属性，若为true则手动刷新页面；同时需用pushState/replaceState配合popstate事件主动管理状态，保存滚动位置、表单数据等DOM状态。
跳转后点浏览器返回按钮，页面重新加载了怎么办
这是 HTML5 历史记录管理中最常被误判的问题：你以为「返回」是恢复上一状态，其实默认行为是触发 pageshow 事件并可能重新加载（尤其是 iOS Safari 或启用了 bfcache 失效策略的场景）。关键不是「能不能保持」，而是「你有没有主动接管状态保存逻辑」。
浏览器原生不保存 DOM 状态、滚动位置、表单输入或 JS 变量值。必须用 pushState() / replaceState() 配合 popstate 事件手动存取。
-
pushState()要传入可序列化的 state 对象（不能含函数、DOM 节点） - state 数据大小限制约 640KB（Chrome），超限会静默失败，建议只存关键标识（如
{tab: "detail", id: 123}） - 不要依赖
history.state在页面首次加载时读取 —— 它在直接访问 URL 时为null
用 pushState() 跳转但不刷新页面的实操要点
常见错误是只调用 pushState() 却没同步更新 UI，导致 URL 变了但内容没变，用户以为跳转失败。
正确做法是把「状态变更」和「URL 更新」视为原子操作：
立即学习“前端免费学习笔记（深入）”；
- 先更新页面内容（比如用 AJAX 渲染新模块、切换 tab、滚动到锚点）
- 再调用
pushState(state, title, url)——title参数目前所有浏览器都忽略，可传空字符串 - 确保
url是同源的相对路径（如"product/456"），否则抛SecurityError - 如果只是更新参数（如搜索关键词），优先用
replaceState()避免在历史栈中堆积冗余条目
fetch(`/api/item/${id}`)
.then(r => r.json())
.then(data => {
renderDetail(data); // 先更新 DOM
history.pushState({ page: 'detail', id }, '', `?id=${id}`); // 再更新 URL
});
popstate 事件监听不到？检查这三个地方
很多开发者写了 window.addEventListener('popstate', handler) 却收不到事件，通常卡在这三处：
- 监听代码执行太晚：必须在
<script></script>中尽早注册，不要等DOMContentLoaded之后才加 —— 返回动作可能在 DOM 构建前就触发 - 页面通过
location.href或location.assign()跳转，会清空当前 history entry 的 state，导致后续popstate携带null—— 改用pushState()跳转才能延续状态链 - 移动端 WebView（如微信内置浏览器）可能禁用
popstate，需 fallback 到监听hashchange或监听页面可见性（document.visibilityState）来感知返回
表单输入、滚动位置这些「看不见的状态」怎么存
HTML5 History API 不自动保存这些，得自己绑定时机：
- 滚动位置：在
pushState()前存window.scrollY到 state；在popstate回调里用window.scrollTo(0, state.scrollY) - 表单字段：对
<input>/<textarea></textarea>绑定input事件，将值暂存到sessionStorage；popstate时读取并还原（注意防 XSS，别直接 innerHTML） - 避免在
beforeunload中存大量数据 —— 该事件在部分 Android 浏览器中不可靠，且会阻塞导航
复杂单页应用建议用 scrollRestoration: 'manual' 关闭浏览器默认滚动恢复：history.scrollRestoration = 'manual'，否则它可能和你的逻辑冲突。
