编辑“︁HTML历史API”︁（章节）

== 实际应用案例 ==
=== 单页应用路由 ===
典型SPA路由实现：
<syntaxhighlight lang="javascript">
// 路由配置
const routes = {
  '/': showHomePage,
  '/about': showAboutPage,
  '/contact': showContactPage
};

// 初始化路由
function navigate(path) {
  const handler = routes[path];
  if (handler) {
    handler();
    history.pushState({ path }, null, path);
  }
}

// 处理浏览器后退/前进
window.addEventListener('popstate', (e) => {
  const path = e.state?.path || window.location.pathname;
  routes[path]?.();
});
</syntaxhighlight>

=== 表单多步骤向导 ===
保存各步骤状态而不提交：
<mermaid>
graph LR
  A[步骤1] -->|pushState| B[步骤2]
  B -->|pushState| C[步骤3]
  C -->|用户点击返回| B
  B -->|用户点击返回| A
</mermaid>

对应代码实现：
<syntaxhighlight lang="javascript">
let formData = {};

function goToStep(step, data) {
  Object.assign(formData, data);
  history.pushState({ step }, `Step ${step}`, `?step=${step}`);
  renderStep(step);
}

window.addEventListener('popstate', (e) => {
  const step = e.state?.step || 1;
  renderStep(step);
});
</syntaxhighlight>