通过history解决ajax不支持前进/后退/刷新的问题

当使用 Ajax 时，页面中的 URL 并不会被改变，这样 user-agent 在使用后退和前进功能时，就会失效。为此可以通过 history 对象来处理这个问题。

window.history 对象允许 JavaScript 访问浏览器的历史记录。其中最常用的方法是 pushState() 和 replaceState()，它们允许添加和修改当前历史记录的状态并使用新的 URL 来更新页面。

下面是使用 pushState() 和 replaceState() 解决 Ajax 不支持前进/后退/刷新的问题的完整攻略：

1.使用pushState()方法：

// 更改URL，但不刷新页面
window.history.pushState({ page: "page2" }, "Title 2", "?page=2");

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

在这个例子中，我们使用 pushState() 更改了 URL 并添加了一个新的历史记录。在用户点击后退按钮时，window 对象会触发 popstate 事件，我们可以监听 popstate 事件来获取历史记录的状态和 URL，并根据需要更新页面内容。

2.使用replaceState()方法：

// 替换URL，但不刷新页面
window.history.replaceState({ page: "page3" }, "Title 3", "?page=3");

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

在这个例子中，我们使用 replaceState() 方法替换了当前的历史记录，并在 popstate 事件中监听历史记录的状态和 URL，还可以根据需要更新页面内容。

通过这两个方法，我们可以处理 Ajax 不支持前进/后退/刷新的问题，避免浏览器历史记录失效的情况。