window.history详解

window.history 是浏览器提供的接口，用于操作浏览器的会话历史记录（Session History），即用户在当前标签页或窗口中访问的页面列表。window.history 属于 HTML5 规范中的部分。

以下是 window.history 的常见属性和方法详解：

---

属性

1. history.length

   • 表示会话历史中的条目数（即页面的数量），包括当前页面。
   • 示例：

     console.log(history.length); // 当前会话的历史条目数

2. history.state

   • 返回当前历史条目中与 pushState 或 replaceState 方法相关联的状态对象（如果存在）。
   • 示例：

     console.log(history.state); // 当前历史条目的状态对象

---

方法

1. history.back()

   • 等效于用户点击浏览器的“后退”按钮，导航到会话历史中的前一个页面。
   • 示例：

     history.back(); // 返回到上一页

2. history.forward()

   • 等效于用户点击浏览器的“前进”按钮，导航到会话历史中的下一个页面。
   • 示例：

     history.forward(); // 前进到下一页

3. history.go(delta)

   • 根据 delta 参数导航到会话历史中的指定位置。
     • delta = -1：等效于 history.back()。
     • delta = 1：等效于 history.forward()。
     • delta = 0：刷新当前页面。
   • 示例：

     history.go(-2); // 返回到两步之前的页面
     history.go(2);  // 前进两步
     

4. history.pushState(state, title, url)

   • 将新的条目添加到会话历史堆栈中，而不会重新加载页面。
   • 参数说明：
     • state：与新历史条目关联的状态对象。
     • title：当前页面的标题（大多数浏览器忽略此参数）。
     • url：新的历史记录条目的 URL（同源限制）。
   • 示例：

     history.pushState({page: 1}, "Title", "/page1");

5. history.replaceState(state, title, url)

   • 修改当前历史条目，而不会创建新的条目。
   • 参数同 pushState。
   • 示例：

     history.replaceState({page: 2}, "Title", "/page2");

---

使用场景

1. 单页应用（SPA）中的导航

   • 通过 pushState 和 replaceState 实现前端路由切换。
   • 示例：

     function navigateTo(url) {
       history.pushState(null, "", url);
       console.log("Navigated to:", url);
     }
     navigateTo("/about"); // 改变 URL，页面无刷新
     

2. 自定义返回行为

   • 拦截用户的后退或前进操作。
   • 示例：

     window.addEventListener("popstate", (event) => {
       console.log("State changed:", event.state);
     });
     

3. 保存应用状态

   • 利用 state 保存用户的当前界面状态，便于用户返回后恢复。
   • 示例：

     history.pushState({scrollPosition: 100}, "Title", "/page");

---

注意事项

1. 同源限制

   • pushState 和 replaceState 修改的 url 必须与当前页面同源，否则会抛出错误。

2. 事件监听

   • popstate 事件在用户触发“前进”、“后退”时触发，与 state 相关的操作配合使用效果更佳。

3. 性能优化

   • 频繁操作 pushState 时，注意避免生成过多的历史条目，影响用户体验。

4. 兼容性

   • 大部分现代浏览器都支持 window.history 的所有功能，但在使用时最好检查特定方法的兼容性。