1. 从一次“意外”的表单丢失说起

那天下午，我正在调试一个刚上线的后台管理系统。用户反馈说，在某个复杂的多步骤表单里，好不容易填了十几项数据，点击“下一步”进入预览页，然后习惯性地按了一下浏览器的后退按钮，想回去修改点东西。结果，页面是回去了，但刚才填的所有数据，全没了。用户只能从头再来。这显然是个糟糕的体验。问题就出在，我们的前端代码没有“感知”到用户通过浏览器后退按钮返回页面的这个行为，因此没有机会去恢复之前保存在内存或临时存储里的表单状态。

这个场景，就是监听浏览器返回、后退、上一页按钮事件的典型需求。它不仅仅是防止数据丢失，在单页应用（SPA）中，它还关乎路由的准确切换、组件状态的恢复、以及执行一些离开页面前的清理或确认逻辑。很多开发者，包括早期的我，可能会想到用window.onbeforeunload事件，但这个事件太“重”了，它监听的是整个窗口的卸载，包括关闭标签页、刷新页面，而不仅仅是“返回上一页”。我们需要的是一个更精准的“导航”事件。

核心关键词popstate就是为此而生的。它是 HTML5 History API 的一部分，专门用来响应通过浏览器历史记录进行的导航，包括点击后退/前进按钮，或者在 JavaScript 中调用history.back()、history.forward()、history.go()。理解并正确使用popstate，是解决这类问题的钥匙。本文将深入拆解popstate事件的工作原理、应用场景、常见陷阱，并分享一些实战中积累的、教科书里不会写的经验。

2. 理解popstate：它到底在监听什么？

要正确使用一个工具，首先得明白它的边界。popstate事件监听的是当前窗口历史记录条目（history entry）的改变。更具体地说，当活动历史记录条目发生变化时，就会触发popstate事件。

这里有几个关键点需要厘清：

1. 触发条件：popstate事件在以下情况会被触发：

   • 用户点击浏览器的后退或前进按钮。
   • 在 JavaScript 中调用history.back()、history.forward()、history.go(n)。
   • 需要注意的是，首次加载页面时不会触发popstate。因为此时并没有发生历史记录条目的“变化”，只是创建了第一个条目。

2. 与pushState/replaceState的关系：popstate是 History API 的“消费者”，而pushState和replaceState是“生产者”。pushState会向历史记录栈压入一个新状态，replaceState会替换当前状态，但它们调用时不会触发popstate事件。这很合理，因为这两个操作是“推动”历史，而popstate是在“弹出”（pop）历史时响应。这个设计分离了状态管理和状态响应，让逻辑更清晰。

3. 事件对象event.state：这是popstate事件的灵魂。当事件触发时，event.state属性包含了通过pushState或replaceState设置的、与目标历史记录条目关联的状态对象（state object）的一个副本。如果目标历史记录条目没有关联的状态对象（比如是一个普通的、没有使用 History API 的页面），那么event.state为null。

   window.addEventListener('popstate', function(event) { console.log('位置变化了。新状态:', event.state); // 在这里，你可以根据 event.state 来恢复页面状态 if (event.state && event.state.page === 'form') { restoreFormData(event.state.formData); } });

一个常见的误解是，认为popstate能阻止导航。实际上，popstate事件监听器无法取消或阻止导航行为。导航已经发生了，事件是在导航完成后（或进行中）触发的，让你有机会做出响应。如果你需要在用户离开前进行确认，应该使用beforeunload事件（但如前所述，它粒度太粗），或者在单页应用框架（如 Vue Router、React Router）中，使用它们提供的导航守卫（Navigation Guards）机制，这些机制内部可能综合运用了popstate和其他技术。

3. 基础实现与核心代码模式

了解了原理，我们来看如何实现一个基础的监听器。代码本身不复杂，但细节决定成败。

3.1 标准的事件监听写法

最直接的方式就是给window对象添加popstate事件监听器。

// 推荐写法：使用具名函数，便于后续移除监听器 function handlePopState(event) { console.log('[PopState] 事件触发', { state: event.state, location: window.location.href }); // 根据 event.state 恢复应用状态 if (event.state) { // 假设我们的状态对象里有一个 `view` 字段标识页面视图 switch (event.state.view) { case 'home': renderHomePage(); break; case 'settings': renderSettingsPage(event.state.settingsTab); break; // ... 其他视图 default: // 如果没有自定义状态，或者状态为null，可以基于当前URL进行路由 routeBasedOnUrl(window.location.pathname); } } else { // event.state 为 null，通常意味着这是一个非SPA的普通页面导航，或者初始条目。 // 在SPA中，我们可能仍然需要根据当前URL进行路由。 routeBasedOnUrl(window.location.pathname); } } // 添加事件监听 window.addEventListener('popstate', handlePopState); // 在应用卸载或特定生命周期时，记得移除监听器，避免内存泄漏 // window.removeEventListener('popstate', handlePopState);

为什么推荐具名函数？在单页应用中，组件可能会频繁挂载和卸载。如果你在组件挂载时通过匿名函数添加了popstate监听，而在卸载时没有移除，那么每次组件挂载都会新增一个监听器。多次导航后，同一个函数会被重复执行多次，导致难以调试的 bug。使用具名函数，可以确保在componentWillUnmount或useEffect的清理函数中精确地移除对应的监听器。

3.2 与pushState/replaceState的配合使用

popstate通常不会单独使用，它需要和pushState/replaceState搭档，共同管理应用状态和历史记录。

// 假设我们有一个表单页面，用户填写后进入预览页 function navigateToPreview(formData) { // 1. 首先，将当前的表单数据保存到状态对象中 const stateObject = { view: 'preview', formData: formData, timestamp: Date.now() }; // 2. 使用 pushState 创建新的历史记录条目，并关联状态数据 // pushState(state, title, url) history.pushState(stateObject, '', '/preview'); // URL 变为 /preview // 3. 更新UI，渲染预览页面（pushState本身不会触发页面重载或popstate） renderPreviewPage(formData); } // 当用户在预览页点击浏览器后退按钮时，handlePopState 会被调用 // event.state 就是我们之前 pushState 时传入的 stateObject // 在 handlePopState 里，我们可以根据 stateObject.view 和 formData 重新渲染表单页

关于pushState的title参数：目前绝大多数浏览器会忽略这个参数，它主要用于未来可能的扩展。设置一个描述性的标题是个好习惯，但不要依赖它来更新浏览器标签页的标题。更新标签页标题应该使用document.title。

关于 URL：pushState的第三个参数url可以是绝对路径或相对路径。它改变了浏览器地址栏的 URL，但不会导致浏览器向服务器发起请求。这是实现 SPA 无刷新路由的基础。你需要确保你的服务器配置（如 Nginx, Apache）对于所有前端路由路径，都回退到同一个 HTML 入口文件（例如index.html），否则用户直接访问/preview这样的 URL 会得到 404 错误。

3.3 处理“刷新”和“直接访问”场景

这是popstate监听中的一个经典陷阱。假设用户通过后退按钮回到了一个由pushState创建的/form页面，此时页面状态通过event.state完美恢复。然后用户按了 F5 刷新页面。

问题来了：刷新页面时，popstate事件不会触发。页面会以/form这个 URL 重新加载。如果你的 SPA 入口逻辑（通常是DOMContentLoaded事件后）只是简单地根据window.location.pathname（即/form）来渲染对应的“空”表单页，那么之前通过pushState保存的formData就丢失了，因为event.state在页面加载时是获取不到的。

解决方案是，在应用初始化时，主动检查history.state。

// 应用启动入口 document.addEventListener('DOMContentLoaded', function() { // 首先，检查当前历史记录条目是否有关联的状态 const initialState = history.state; if (initialState) { // 如果有状态，说明这个页面是通过pushState创建的，并且用户可能刷新了页面。 // 直接使用这个状态来恢复应用。 restoreAppState(initialState); } else { // 如果 history.state 为 null，说明是首次加载或一个没有状态的普通页面。 // 根据当前URL进行默认的路由。 routeBasedOnUrl(window.location.pathname); } // 然后，再开始监听未来的 popstate 事件 window.addEventListener('popstate', handlePopState); });

history.state属性提供了对当前历史记录条目状态对象的直接访问。在页面加载时，它等同于未来popstate事件触发时所能得到的event.state。利用这一点，我们可以确保无论是通过导航还是刷新进入页面，都能正确初始化应用状态。

4. 实战中的复杂场景与进阶技巧

掌握了基础模式，我们来看看在实际项目中会遇到哪些更复杂的情况，以及如何应对。

4.1 在单页应用框架（Vue Router / React Router）中的角色

现代前端开发中，我们很少直接操作popstate和pushState，而是使用成熟的路由库。了解它们底层如何工作，有助于我们更好地使用和调试。

以 Vue Router 为例，它的 Hash 模式使用hashchange事件，而 History 模式的核心就是基于popstate事件。当你调用router.push或router.replace时，内部会调用history.pushState或history.replaceState，并更新路由匹配的组件。同时，Vue Router 会监听popstate事件，当事件触发时，它会根据变化后的 URL 重新匹配路由，并触发相应的导航守卫和组件更新。

那么，我们还需要自己监听popstate吗？大多数情况下不需要。路由库已经为你处理了核心的导航逻辑。但是，在某些边缘场景下，你可能需要直接响应历史记录的变化，而这些变化可能不完全是路由变化（比如，你想在历史状态中存储一些与路由组件无关的全局UI状态）。这时，你可以谨慎地添加自己的popstate监听器，但必须注意不要和路由库的行为冲突。通常，你的监听器应该在路由库的监听器之后执行（通过更晚地添加addEventListener），并且要避免执行会再次触发路由库导航的操作。

4.2 移动端手势返回与popstate的挑战

在移动端浏览器，特别是微信、支付宝等应用的内置 WebView 中，用户除了点击左上角的返回按钮，更常用的方式是从屏幕左侧边缘向右滑动来返回上一页。这个手势触发的也是浏览器的历史记录回退，因此同样会触发popstate事件。从事件机制上看，这和点击按钮没有区别。

但是，这里存在一个感知上的难题：如何区分一次“返回”是来自按钮点击还是手势滑动？在某些设计场景下，我们可能希望对手势返回添加一些平滑的过渡动画（类似于原生APP的页面滑动效果），而对按钮点击则采用默认的跳转。

纯popstate事件无法区分触发源。一个常见的变通方案是结合touch事件来模拟。思路是：监听touchstart，记录起始位置。如果起始位置在屏幕左边缘一定范围内，并且在touchend时发生了足够大的水平位移，则预判为用户可能在进行手势返回。此时，我们可以先执行自定义的滑动动画，然后在动画结束时，再通过history.back()或history.go(-1)来真正触发历史回退和popstate事件。

let touchStartX = 0; const edgeThreshold = 30; // 距离左边缘30像素内算作手势返回区域 document.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; if (touchStartX < edgeThreshold) { // 触摸起始点在左边缘，可能触发手势返回 // 可以在这里添加一些视觉提示，或者阻止默认的滚动行为 } }); document.addEventListener('touchend', (e) => { const touchEndX = e.changedTouches[0].clientX; const deltaX = touchEndX - touchStartX; // 如果是从左边缘开始，且向右滑动了超过100像素 if (touchStartX < edgeThreshold && deltaX > 100) { // 1. 先执行自定义的页面滑动出屏动画 executeSlideOutAnimation().then(() => { // 2. 动画完成后，再执行真正的历史回退 history.back(); }); // 阻止可能存在的其他默认行为 e.preventDefault(); } });

注意：这种方案需要精细的触摸事件处理和动画协调，且e.preventDefault()的使用需格外小心，因为它可能会干扰页面的正常滚动。这通常用于对交互体验有极高要求的 Hybrid App 或 PWA 中。

4.3 状态序列化与大小限制

通过pushState存入state对象的数据，会被浏览器持久化到磁盘（在会话历史中）。这意味着，这个状态对象必须是可序列化的。你不能存入 DOM 元素、函数、循环引用的对象等。

// 错误示例 const state = { view: 'chart', chartInstance: myChart, // myChart 是一个复杂的ECharts实例，不可序列化 updateFunction: () => { /* ... */ } // 函数不可序列化 }; history.pushState(state, '', '/chart'); // 当通过popstate回来时，state.chartInstance 和 state.updateFunction 将会丢失或变成空对象。

正确的做法是只存储最小化的、必要的数据，例如标识符、配置参数等，然后在popstate事件触发后，利用这些数据重新创建复杂的对象。

// 正确示例 const state = { view: 'chart', chartType: 'line', dataId: 'sales_2024_q1' }; history.pushState(state, '', '/chart'); // 在 handlePopState 或初始化函数中 if (state && state.view === 'chart') { const fullData = fetchDataById(state.dataId); // 重新获取或从全局缓存中读取 renderChart(state.chartType, fullData); // 重新渲染图表 }

另外，浏览器对state对象的大小有限制。虽然 HTML5 规范没有明确规定，但各浏览器实现有差异，通常在几 MB 到几十 MB 之间。存入过大的状态对象可能导致pushState操作失败或性能问题。最佳实践是保持状态对象轻量。对于大量数据，应使用sessionStorage、IndexedDB或内存缓存，只在state中保存一个指向这些数据的键（Key）。

4.4 处理异步操作与竞态条件

在popstate事件处理函数中执行异步操作（如 API 请求）时，需要警惕竞态条件。假设用户快速连续点击了两次后退按钮，第一次后退触发的数据请求还没返回，第二次后退的事件又触发了。这可能导致页面状态最终显示的是第一次请求的结果，但 URL 和历史状态已经是第二次后退的目标，造成状态和UI不一致。

一个简单的防御策略是使用“令牌”（Token）或取消机制。

let currentNavigationToken = null; async function handlePopState(event) { // 为本次导航生成一个唯一令牌 const thisToken = Symbol('navigation'); currentNavigationToken = thisToken; const targetState = event.state; // 执行异步操作，例如根据状态加载数据 const data = await fetchDataForState(targetState); // 在更新UI前，检查令牌是否还是当前最新的导航令牌 // 如果不是，说明有更新的导航发生了，本次结果应被丢弃 if (currentNavigationToken !== thisToken) { console.log('导航已过时，丢弃结果'); return; } // 安全地更新UI updateUIWithData(data); }

对于更复杂的场景，可以考虑使用AbortController来主动取消未完成的fetch请求。

5. 常见问题排查与“避坑”指南

即使理解了原理，在实际编码中依然会遇到一些坑。下面是我总结的几个高频问题及其解决方案。

5.1 监听器被多次触发或无效

症状：控制台里popstate事件的日志被打印了多次，或者页面状态恢复逻辑执行了多次。

根因：

1. 重复添加监听器：这是最常见的原因。在单页应用的组件生命周期中，如果没有正确清理，addEventListener可能会被调用多次。每次调用都会新增一个监听器。
2. 事件冒泡：popstate事件是作用于window的，它不会在 DOM 树上冒泡，所以通常不是冒泡问题。但如果你错误地将其添加到document或body上，在某些浏览器中可能不会生效。

解决方案：

• 始终使用具名函数，并在组件或模块卸载时调用removeEventListener。
• 在 Vue/React 等框架中，利用生命周期钩子确保监听器的添加和移除成对出现。

  // React 函数组件示例 import { useEffect } from 'react'; function MyComponent() { useEffect(() => { function handlePopState(e) { /* ... */ } window.addEventListener('popstate', handlePopState); // 清理函数：在组件卸载时移除监听器 return () => { window.removeEventListener('popstate', handlePopState); }; }, []); // 空依赖数组，确保只在组件挂载时执行一次 // ... 组件其他逻辑 }

5.2event.state为null或不是预期值

症状：在handlePopState中，event.state是null，或者里面的数据不对。

排查步骤：

1. 检查pushState/replaceState的调用：确保在导航到目标页时，确实调用了这两个方法并传入了正确的state对象。在开发中，可以在调用前后打印history.state来验证。
2. 检查导航来源：popstate不仅由后退/前进触发，直接修改浏览器地址栏并回车、点击一个普通链接，也会改变历史记录（产生一个新条目），但不会关联state。当从这样的条目通过后退返回时，event.state就是null。你需要为这种情况编写健壮的降级逻辑（例如，回退到基于 URL 的路由）。
3. 序列化问题：如前所述，确保state对象是可序列化的纯数据。在pushState后立即通过history.state检查数据是否完整。
4. 浏览器兼容性：虽然现代浏览器支持良好，但一些非常老的浏览器或特殊环境（如某些嵌入式 WebView）可能对state对象的支持有差异。对于关键路径，要有降级方案。

5.3 浏览器兼容性与 Polyfill

popstate和 History API 是 HTML5 标准，在现代浏览器（包括移动端）中得到了广泛支持。对于需要支持 IE 9 及以下版本的老旧项目，需要使用 Polyfill。

但是，请注意，IE 10 和 IE 11 虽然支持popstate，但在页面首次加载时触发popstate事件的行为与其他浏览器不一致（它们会在加载时触发一次，且event.state为undefined）。如果你的代码逻辑依赖“首次加载不触发”的假设，就需要针对 IE 进行特殊处理。

一个常见的 Polyfill 或兼容层思路是，对于不支持pushState的浏览器（如 IE9），回退到使用 Hash（#）模式。许多路由库（如 Vue Router）内置了这种模式切换能力。在 Hash 模式下，监听的是hashchange事件，其原理与popstate类似，但状态管理方式不同（状态通常保存在 URL 的 hash 片段或localStorage中）。

5.4 与页面卸载事件beforeunload的混淆

这是概念上的一个关键区分点，务必厘清：

• popstate：监听同一文档内的历史记录变化（导航）。用户还在你的网站/应用内跳转。
• beforeunload：监听整个窗口或标签页即将卸载。这意味着用户要关闭标签页、刷新页面、或在地址栏输入新网址并离开。

它们解决的问题不同：

• 用popstate来恢复SPA内部页面状态。
• 用beforeunload来防止用户意外离开导致未保存的数据丢失（例如，弹出一个确认对话框“确定要离开吗？您可能有未保存的更改。”）。

// beforeunload 用法示例 window.addEventListener('beforeunload', function (event) { if (hasUnsavedChanges) { // 标准做法是设置 returnValue 并调用 preventDefault event.preventDefault(); event.returnValue = ''; // 在大多数浏览器中，这个字符串不会被显示，但必须设置一个非空值。 // 现代浏览器会显示一个通用的确认对话框，无法自定义文本。 } });

绝对不要在popstate处理函数中尝试阻止导航（例如调用event.preventDefault()），这是无效的。如果需要在 SPA 内部进行“离开确认”，应该使用路由库的导航守卫（如 Vue Router 的beforeRouteLeave）或在执行pushState前进行判断。

6. 性能优化与最佳实践

当应用变得复杂，历史状态管理也可能成为性能瓶颈。以下是一些优化建议。

6.1 状态管理的去中心化与懒加载

不要试图在history.state里保存整个应用的状态。这会让状态对象变得臃肿，且任何微小的状态变化都需要执行一次replaceState（因为pushState会创建新历史条目，不适合频繁更新）。

最佳实践是分层管理：

• 路由级状态：与当前视图强相关的、轻量的状态，适合放在history.state中。例如，当前激活的标签页、列表的滚动位置、模态框的打开状态等。
• 应用级状态：使用专门的状态管理库，如 Vuex、Pinia、Redux、MobX 或 Context API。这些状态独立于路由存在。
• 数据级状态：从服务器获取的数据，可以保存在内存缓存、sessionStorage或状态管理库中。在history.state中只保存数据的ID或查询参数。

对于复杂的子组件状态，可以考虑“懒恢复”。即在popstate事件中，只标记需要恢复的组件，等到该组件实际被渲染（或即将进入视口）时，再根据标记去执行具体的状态恢复逻辑。这可以避免在导航发生时一次性恢复所有组件状态带来的性能卡顿。

6.2 合理使用replaceState避免历史记录污染

pushState会创建新的历史记录条目。如果用户在同一个页面上进行了多次操作（比如在搜索框输入，每输入一个字符就过滤一次列表），每次操作都pushState的话，历史记录会被大量相似的条目填满，用户需要点击很多次后退才能离开这个页面。这通常不是好的用户体验。

对于这类不构成实质性导航、只是更新当前视图状态的操作，应该使用history.replaceState。它用新的状态对象和 URL 替换当前历史记录条目，而不会创建新条目。

// 实时搜索过滤 let searchTimeout; searchInput.addEventListener('input', (e) => { clearTimeout(searchTimeout); searchTimeout = setTimeout(() => { const query = e.target.value; performSearch(query); // 使用 replaceState 更新当前URL和状态，而不是 pushState history.replaceState( { view: 'search', query: query }, '', `/search?q=${encodeURIComponent(query)}` ); }, 300); // 防抖300毫秒 });

一个简单的判断原则是：如果这个状态变化，用户会期望通过“后退”按钮回退到变化前的样子吗？如果“是”，用pushState；如果“否”，用replaceState。

6.3 监听器的节流与防抖

虽然popstate事件本身不频繁，但如果你在事件处理函数中执行了重操作（如复杂的DOM操作、大量计算、网络请求），在用户快速连续点击后退/前进按钮时，可能会引发性能问题。

可以考虑为处理函数增加防抖（Debounce）或节流（Throttle），但需要非常小心，因为这会延迟状态恢复，可能导致UI短暂显示错误状态。一个更安全的优化是，确保处理函数内的操作是异步且可中断的（如前面提到的令牌机制），并优先更新最重要的UI部分。

7. 一个完整的实战案例：带状态恢复的图片画廊

让我们通过一个简化但完整的图片画廊SPA案例，将上述所有知识点串联起来。这个画廊有列表页和详情页，要求在详情页浏览时，后退到列表页能保持之前的滚动位置和筛选状态。

1. 数据结构与状态定义

// 状态对象结构设计 const galleryState = { view: 'list', // 或 'detail' // 列表页状态 listState: { scrollTop: 0, // 滚动位置 filter: 'all', // 当前筛选条件：'all', 'landscape', 'portrait' currentPage: 1 }, // 详情页状态 detailState: { imageId: null, zoomLevel: 1 } };

2. 核心导航与状态管理函数

// 状态恢复函数 function restoreAppState(state) { if (!state) { // 初始状态，渲染默认列表 renderListView(); return; } switch (state.view) { case 'list': renderListView(state.listState); // 渲染后，将列表滚动到指定位置 setTimeout(() => { listContainer.scrollTop = state.listState.scrollTop; }, 0); // 使用 setTimeout 确保在DOM渲染后执行 break; case 'detail': // 先渲染列表页作为背景（如果需要），然后渲染详情页 renderListView(state.listState); renderDetailView(state.detailState.imageId, state.detailState.zoomLevel); break; } } // 跳转到详情页 function navigateToDetail(imageId) { // 1. 保存当前列表状态（如滚动位置） const currentListState = { scrollTop: listContainer.scrollTop, filter: currentFilter, currentPage: currentPage }; // 2. 创建新的历史状态 const newState = { view: 'detail', listState: currentListState, // 保存离开时的列表状态 detailState: { imageId: imageId, zoomLevel: 1 } }; // 3. pushState 并更新URL history.pushState(newState, `Image ${imageId}`, `/image/${imageId}`); // 4. 渲染详情页 renderDetailView(imageId); } // 在列表页更新筛选条件 function updateFilter(newFilter) { // 这是一个原地更新操作，使用 replaceState const currentState = history.state || { view: 'list', listState: {} }; const newState = { ...currentState, listState: { ...currentState.listState, filter: newFilter, scrollTop: 0 // 筛选后重置滚动位置 } }; history.replaceState(newState, '', `/?filter=${newFilter}`); renderListView(newState.listState); }

3. 事件监听与初始化

// popstate 事件处理器 function handlePopState(event) { console.log('PopState triggered with state:', event.state); restoreAppState(event.state); } // 应用初始化 document.addEventListener('DOMContentLoaded', function() { // 检查是否有已存在的历史状态 const initialState = history.state; if (initialState) { // 有状态，直接恢复（例如用户刷新了详情页） restoreAppState(initialState); } else { // 无状态，根据当前URL初始化 const path = window.location.pathname; const urlParams = new URLSearchParams(window.location.search); if (path.startsWith('/image/')) { const imageId = path.split('/')[2]; // 模拟一个从列表页跳转过来的状态（因为直接访问详情页没有列表状态） const state = { view: 'detail', listState: { scrollTop: 0, filter: 'all', currentPage: 1 }, detailState: { imageId: imageId, zoomLevel: 1 } }; // 使用 replaceState 设置初始状态，避免产生额外的历史条目 history.replaceState(state, '', window.location.href); restoreAppState(state); } else { // 列表页 const filter = urlParams.get('filter') || 'all'; const state = { view: 'list', listState: { scrollTop: 0, filter: filter, currentPage: 1 } }; history.replaceState(state, '', window.location.href); restoreAppState(state); } } // 开始监听未来的 popstate 事件 window.addEventListener('popstate', handlePopState); });

这个案例展示了如何将popstate、pushState、replaceState以及应用状态恢复逻辑有机结合起来，构建一个体验接近原生应用的单页画廊。关键在于精心设计状态对象的结构，并在每一个导航点准确地保存和恢复状态。