window.history 是 JavaScript 中 window 对象的一个属性，它提供了浏览器窗口的会话历史（即用户访问过的 URL）的信息和导航方法。window.history 对象使你能够在浏览历史中向前或向后导航，以及在历史中添加新的状态。

以下是一些关于 window.history 的基本信息：

window.history 属性

1. window.history.length: 返回历史列表中的 URL 数量。
    console.log(window.history.length);

window.history 方法

1. window.history.back(): 后退到历史列表中的上一个 URL。
    window.history.back();

2. window.history.forward(): 前进到历史列表中的下一个 URL。
    window.history.forward();

3. window.history.go(offset): 在历史列表中相对于当前页面移动指定数量的步数。正数表示前进，负数表示后退。
    // 后退两步
    window.history.go(-2);

    // 前进一步
    window.history.go(1);

4. window.history.pushState(state, title, url): 向浏览历史添加一个新的状态。state 参数是一个表示新状态的对象，title 参数是页面的标题（目前大多数浏览器忽略这个参数），url 参数是新状态的 URL。
    window.history.pushState({ page: 1 }, 'Title 1', '/page1');

5. window.history.replaceState(state, title, url): 替换当前历史状态。与 pushState 相似，但不会创建新的历史记录条目，而是替换当前的状态。
    window.history.replaceState({ page: 2 }, 'Title 2', '/page2');

注意事项

  •  在使用 pushState 和 replaceState 方法时，它们不会触发页面的刷新，而只是在浏览器历史中添加或替换记录。在这种情况下，通常需要监听 popstate 事件来处理状态的变化。

    window.addEventListener('popstate', function(event) {
        console.log('State changed:', event.state);
    });

  •  在单页应用（SPA）等场景中，pushState 和 replaceState 可以用来实现页面内容的切换，而无需整页刷新。


示例
// 后退一步
window.history.back();

// 前进两步
window.history.forward();
window.history.forward();

// 向浏览历史添加新状态
window.history.pushState({ page: 3 }, 'Title 3', '/page3');

// 替换当前历史状态
window.history.replaceState({ page: 4 }, 'Title 4', '/page4');

window.history 对象提供了在浏览历史中导航和操作的方法，使得在一些前端应用中能够更灵活地管理页面状态。


转载请注明出处：http://www.pingtaimeng.com/article/detail/3567/JavaScript