HTML5-原生History

HTML5 引入了原生的 History API，它允许我们在不刷新页面的情况下修改浏览器的会话历史记录。这里是一些常用的 History API 方法：

1. history.pushState()：向历史记录中添加一个新的状态。
2. history.replaceState()：替换当前历史记录中的状态。
3. history.state：返回当前状态的值。
4. window.onpopstate：当浏览器的历史记录条目被激活时触发这个事件。

下面是使用 history.pushState() 和 history.replaceState() 的例子：

// 添加一个新的历史记录条目
history.pushState({page: 1}, "title 1", "?page=1");
 
// 替换当前的历史记录条目
history.replaceState({page: 2}, "title 2", "?page=2");
 
// 监听popstate事件来处理状态改变
window.onpopstate = function(event) {
    var state = event.state;
    if (state) {
        // 根据state的值执行相应的操作
        console.log("state: ", state.page);
    }
};

在这个例子中，我们首先用 pushState() 添加了一个新的状态，并改变了页面的标题和URL。然后我们用 replaceState() 替换了当前的历史记录条目，同样改变了页面的标题和URL。最后，我们设置了一个事件监听器来监听历史记录的变化，并根据状态值执行相应的操作。