JavaScript Window History

History 对象记录并控制浏览器的"前进/后退历史"：用户访问过的页面按顺序排成一条时间线，back() 回到上一页、forward() 去下一页、go(n) 随意跳。HTML5 之后它还提供 pushState/replaceState，让单页应用（SPA）能在不刷新的情况下改变地址栏、支持后退，是现代前端路由的基石。以下示例在浏览器控制台运行。

history 是什么

每个标签页都有一条自己的历史记录链，history 就是操作它的手柄：

console.log(window.history === history);  // 输出：true
console.log(history.length);              // 输出：5（示例），当前标签已访问 5 个页面
console.log(history);   // 输出：History { length: 5, scrollRestoration: "auto", state: null }

length 至少为 1（当前页自己）；在新开标签页里访问 history.length 通常是 1。

前进与后退：back / forward / go

back() 等价于点浏览器后退键，forward() 等价于前进键，go(n) 用整数精确跳：

history.back();      // 效果：后退一页（等价于 history.go(-1)）
history.forward();   // 效果：前进一页（等价于 history.go(1)）
history.go(-2);      // 效果：一次后退两页
history.go(1);       // 效果：前进一页
// 注意：没有历史可退时调用 back() 不会有任何反应，也不会报错

go 的参数可正可负：正数向前、负数向后，超出历史范围则什么都不做。

配合按钮做"上一步/下一步"

页面上放两个按钮，让用户自己控制浏览历史，比调浏览器按钮更友好：

<button onclick="goBack()">上一步</button>
<button onclick="goForward()">下一步</button>
<script>
  function goBack() { history.back(); }
  function goForward() { history.forward(); }
</script>

效果：点击"上一步"浏览器回到上一页，"下一步"在前进过之后才可用；页面随之整体切换（整页刷新式的历史导航）。

HTML5 的 pushState / replaceState

这两个方法不刷新页面就能改变地址栏 URL，并往历史里加记录，是 SPA 路由的核心：

history.pushState({ page: 1 }, "", "?page=1");
// 效果：地址栏变为 ...?page=1，页面不刷新，历史 +1
console.log(location.search);     // 输出：?page=1
history.replaceState({ page: 2 }, "", "?page=2");
// 效果：地址栏变为 ...?page=2，但不新增历史记录，只是替换当前这条

pushState 与 replaceState 的第二个参数（标题）多数浏览器忽略，传空字符串即可。

监听前进后退：popstate

用户按后退/前进键导致 history 变化时触发 popstate 事件，state 是当时 pushState 存的对象：

window.addEventListener("popstate", function (event) {
  console.log("当前状态：", event.state);
});
history.pushState({ page: "home" }, "", "#home");
history.pushState({ page: "about" }, "", "#about");
history.back();   // 触发 popstate，event.state 为 { page: "home" }
// 输出：当前状态： { page: 'home' }

配合"前进后退 + pushState 记录的数据 + 根据 state 渲染对应内容"，就能做出无刷新、可后退的单页应用雏形。

小结：history 管浏览历史，back/forward/go 控制前进后退，length 统计条数；SPA 场景用 pushState 改地址并新增历史、replaceState 改地址不新增，配合 popstate 事件监听用户的前进后退，就能实现不刷新页面的"伪跳转"。