1. 核心定义

  • 浏览器会话历史记录：指在一个浏览器标签页中，从打开到关闭期间访问的所有网页形成的有序序列。
  • 生命周期：与标签页绑定，关闭标签页即销毁。
  • 核心功能：实现「前进」、「后退」导航。

2. 关键区分

概念 会话历史记录 浏览器历史记录
范围 当前标签页的单次会话 所有会话的长期记录
持久性 临时，关闭标签页即消失 永久，直到手动删除
查看方式 通过「前进/后退」按钮 通过 Ctrl+H (历史记录页)
数据性质 导航栈，存储在浏览器内核 URL 集合，存储在硬盘

3. 技术实现：History API

window.history 是操作会话历史记录的接口

核心方法：

1
2
3
4
5
6
7
8
// 导航
history.back(); // 后退 ←
history.forward(); // 前进 →
history.go(-2); // 跳转指定步数

// 添加/修改记录
history.pushState(state, title, url); // 添加新记录
history.replaceState(state, title, url); // 替换当前记录

history = 标签页会话历史记录的接口 ✅

history.state = 查看当前条目的 state 信息的引用 ✅

pushState() = 创建新条目 + 设置 state ✅

replaceState() = 修改当前条目的 state ✅

三个参数：state 设置当前条目 state，title 设置当前标签页 title （Safari 外不支持） ，url 设置当前标签页的 url 再不触发刷新的情况下

重要事件：

1
2
3
4
window.addEventListener("popstate", (event) => {
  // 用户点击前进/后退时触发
  console.log(event.state); // 获取保存的状态数据
});

4. 对象关系模型

银行金库比喻：

  • 金库 = 浏览器内核中的真实历史记录栈
  • 营业柜台 = window 对象 (每次刷新页面时重建)
  • 业务窗口 = window.history (访问金库的接口)
  • 金条 = 历史记录条目

关键认知：

  • window.history 只是引用：它不存储数据，只是操作底层历史记录的接口
  • 数据独立性：真实历史记录由浏览器内核管理，独立于页面加载周期
  • 作用域限定：每个标签页有自己完全独立的 window 和 history

5. 生命周期场景

操作 window 对象 window.history 会话历史记录
刷新页面 ✅ 重置 ❌ 保持不变 ❌ 保持不变
关闭标签页 ✅ 销毁 ✅ 销毁 ✅ 销毁
前进/后退 ❌ 部分重置 ❌ 保持不变 ❌ 保持不变

6. 实际应用场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 单页面应用(SPA)路由切换
function navigateToProduct(productId) {
  // 1. 通过Ajax加载产品数据
  loadProductData(productId);

  // 2. 更新URL，添加历史记录
  history.pushState(
    { productId: productId },
    `Product ${productId}`,
    `/products/${productId}`
  );
}

// 处理浏览器前进/后退
window.addEventListener("popstate", (event) => {
  if (event.state && event.state.productId) {
    loadProductData(event.state.productId); // 恢复页面状态
  }
});