如何用BOM操作浏览器的历史记录？

BOM即浏览器对象模型，是JavaScript与浏览器交互的核心接口，其中的history对象专门用来操作浏览器的历史记录栈，开发者可以通过它实现无刷新页面跳转、历史记录状态管理等功能，在单页应用开发中应用十分广泛。

history对象的核心属性

history对象提供了两个常用的只读属性，用来获取当前历史记录栈的相关信息：

• length：返回当前历史记录栈中的记录总数，包括当前页面，初始加载页面时该值为1。
• state：返回当前历史记录条目对应的状态对象，初始时该值为null，只有调用pushState或replaceState设置过状态才会有值。

操作历史记录的基础方法

前进、后退、跳转

这三个方法用来模拟浏览器的前进后退按钮行为，直接操作历史记录栈的指针位置：

• back()：等同于点击浏览器的后退按钮，跳转到历史记录中的上一个页面，等价于history.go(-1)。
• forward()：等同于点击浏览器的前进按钮，跳转到历史记录中的下一个页面，等价于history.go(1)。
• go(n)：接收一个整数参数，正数表示前进n个页面，负数表示后退n个页面，0表示刷新当前页面。

以下是基础方法的使用示例：

// 后退到上一个页面
history.back();

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

// 前进2个页面
history.go(2);

// 刷新当前页面
history.go(0);

新增历史记录：pushState()

pushState方法可以在不刷新页面的情况下，向历史记录栈中新增一条记录，同时修改浏览器的地址栏URL，该方法接收三个参数：

• state：一个状态对象，会被关联到新增的历史记录条目上，后续可以通过history.state或者popstate事件获取，该对象大小通常限制在640KB以内。
• title：当前大多数浏览器会忽略这个参数，建议传入空字符串或者页面标题。
• url：新增历史记录对应的URL，该URL必须与当前页面同源，否则会抛出安全错误，如果不传入则使用当前URL。

pushState新增的记录会成为当前历史记录栈的栈顶，用户点击后退按钮会回到调用pushState之前的页面。示例代码如下：

// 向历史记录栈新增一条记录，状态对象为{page: 'list'}，地址栏变为/list
history.pushState({page: 'list'}, '', '/list');

// 此时history.length会增加1，history.state的值为{page: 'list'}
console.log(history.length);
console.log(history.state);

修改当前历史记录：replaceState()

replaceState方法的参数和pushState完全一致，区别在于它不会新增历史记录，而是直接替换当前历史记录栈的栈顶条目，用户点击后退按钮不会回到调用replaceState之前的页面。该方法适合用来更新当前页面的状态，避免产生不必要的历史记录。示例代码如下：

// 替换当前历史记录，状态对象更新为{page: 'detail', id: 1}，地址栏变为/detail/1
history.replaceState({page: 'detail', id: 1}, '', '/detail/1');

// 此时history.length不会变化，history.state的值被更新
console.log(history.length);
console.log(history.state);

监听历史记录变化

当历史记录栈发生变化时（比如用户点击前进后退按钮，或者调用pushState、replaceState之后用户触发前进后退），会触发popstate事件，该事件只有在用户主动操作历史记录时才会触发，直接调用pushState和replaceState不会触发该事件。可以在window上监听该事件来处理历史记录变化后的逻辑：

// 监听popstate事件
window.addEventListener('popstate', function(event) {
    // event.state就是对应历史记录条目的状态对象
    console.log('当前历史记录状态：', event.state);
    // 可以根据状态对象更新页面内容
    if (event.state && event.state.page === 'list') {
        // 加载列表页内容
    }
});

注意事项

• pushState和replaceState传入的URL必须与当前页面同源，否则会抛出SecurityError错误，无法跨域操作历史记录。
• 调用pushState和replaceState不会触发页面刷新，也不会触发popstate事件，只有用户点击浏览器的前进后退按钮，或者调用history.back()、history.forward()、history.go()时才会触发popstate事件。
• 页面刷新时，history.state的值会保留，但是如果是通过pushState新增的记录，刷新后对应的状态对象依然存在，不过如果是直接访问对应的URL，没有经过pushState流程，那么history.state会是null。
• 单页应用中通常结合pushState和popstate事件来实现路由功能，避免页面刷新，提升用户体验。

需要注意的是，虽然history对象可以操作历史记录，但是无法读取历史记录栈中其他条目的具体状态，只能获取当前条目的state属性，也无法修改非当前条目的历史记录内容。

BOM浏览器历史记录history对象pushStatereplaceState修改时间：2026-07-05 03:12:22