JS窗口历史记录 - Javascript

在web开发过程中，通常需要管理页面的浏览历史，这就需要通过JavaScript来操作窗口的历史记录。窗口历史记录是一组浏览器会记住的页面，通过对其进行管理，可以实现回退、前进、跳转等功能。

1. 获取历史纪录

获取浏览器的历史记录非常简单，只需要调用window.history对象即可。该对象包含了浏览器的浏览历史记录，例如当前页面、上一页、下一页等等。

    // 返回历史记录中的前一个URL
    window.history.go(-1);

    // 返回历史记录中的下一个URL
    window.history.go(1);

    // 返回历史记录中的前两个URL
    window.history.go(-2);

    // 返回历史记录中的下两个URL
    window.history.go(2);

2. 修改历史记录

除了获取历史记录，还可以使用 JavaScript 编程接口来更新浏览器历史记录。history.pushState() 和 history.replaceState() 是 HTML5 的新增接口，可以在不会引发页面跳转的情况下修改 URL。这些方法的出现主要是为了让 AJAX 开发变得更加友好。

2.1 pushState

    // 添加历史记录，url改变
    history.pushState({page: 1}, "title 1", "?page=1");

    // 添加历史记录，url改变
    history.pushState({page: 2}, "title 2", "?page=2");

    // 添加历史记录，url改变
    history.pushState({page: 3}, "title 3", "?page=3");

pushState 可以接受三个参数：

• 状态对象(state object)，可以保存任何有用的数据，例如分页信息。
• 页面标题(title)，实际上不会显示出来。
• URL 连接(url)，可以是相对或绝对url。

2.2 replaceState

和 pushState() 方法类似，replaceState() 也能修改 URL，但它不会在浏览器的历史记录中添加新记录，而是将当前页的记录替换成新记录。

    // 替换当前历史记录
    history.replaceState({page: 2}, "title 2", "?page=2");

    // 替换当前历史记录
    history.replaceState({page: 3}, "title 3", "?page=3");

3. Popstate事件

当用户点击浏览器的前进或后退按钮时，会触发popstate事件。在这种情况下，可以通过监听该事件来处理历史记录的变化。

    // 监听popstate事件
    window.addEventListener('popstate', function(event) {
        console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    });

popstate事件触发时，浏览器的状态发生了变化，包括URL和history.state。

以上就是管理窗口历史记录的方法，希望这篇文章对你有所帮助！