【html5中history有两个新增的api】在HTML5中，`History` 对象得到了扩展，引入了两个新的API：`pushState()` 和 `replaceState()`。这两个方法允许开发者在不重新加载页面的情况下，修改浏览器的历史记录和当前URL，从而实现单页应用（SPA）中的导航功能。
一、总结
| API 名称 | 功能描述 | 是否会触发页面刷新 | 是否改变当前URL |
| `pushState()` | 向历史记录栈中添加一条新记录，并更新当前URL | 否 | 是 |
| `replaceState()` | 替换当前历史记录条目，不会产生新的历史记录 | 否 | 是 |
二、详细说明
1. `pushState(state, title, url)`
- 作用：将一个新的状态（state）添加到浏览器的历史记录中，同时更新地址栏的URL。
- 参数说明：
- `state`：一个对象，用于存储与该历史记录相关联的数据。
- `title`：目前大多数浏览器忽略这个参数，但为了兼容性仍建议传入。
- `url`：新的URL，不会触发页面加载。
- 使用场景：常用于单页应用中，当用户进行某些操作后，需要在不刷新页面的情况下更新URL。
2. `replaceState(state, title, url)`
- 作用：替换当前的历史记录条目，而不是添加新条目。
- 参数说明：
- `state`：同样是一个对象，用于存储状态数据。
- `title`：同上，一般可设为`document.title`或空字符串。
- `url`：新的URL，也不会触发页面加载。
- 使用场景：适用于需要修改当前页面URL但不想留下历史记录的情况，比如登录成功后更新URL。
三、注意事项
- 这两个API不会导致页面重新加载，因此不能依赖它们来执行页面初始化逻辑。
- 使用时要注意浏览器兼容性，虽然现代浏览器基本都支持，但在旧版浏览器中可能需要回退方案。
- 建议配合 `popstate` 事件使用，以处理浏览器的前进/后退按钮行为。
四、示例代码
```javascript
// pushState 示例
history.pushState({ page: 1 }, "Page 1", "/page1");
// replaceState 示例
history.replaceState({ page: 2 }, "Page 2", "/page2");
```
通过合理使用 `pushState()` 和 `replaceState()`，可以显著提升用户体验，尤其是在构建复杂的单页应用时。这些API是现代Web开发中不可或缺的一部分。
