【html5中history有两个新增的api】在HTML5中，`History` 对象被扩展，增加了两个重要的 API，用于更灵活地操作浏览器的历史记录。这两个 API 分别是 `pushState()` 和 `replaceState()`，它们为单页应用（SPA）提供了更好的用户体验和更强大的导航能力。
一、总结
`pushState()` 和 `replaceState()` 是 HTML5 History API 的核心方法，允许开发者在不刷新页面的情况下修改浏览器地址栏中的 URL，并更新历史记录。这使得前端应用可以实现类似传统多页应用的导航效果，同时提升性能和用户体验。
以下是这两个 API 的简要对比：
| 方法名称 | 功能描述 | 是否改变历史记录 | 是否触发页面加载 | 是否影响浏览器地址栏 |
| `pushState()` | 将新的状态添加到浏览器历史记录中 | 是 | 否 | 是 |
| `replaceState()` | 替换当前历史记录项 | 是 | 否 | 是 |
二、详细说明
1. `pushState()`
- 语法：
```javascript
history.pushState(state, title, url);
```
- 参数说明：
- `state`：一个对象，用于存储与该历史记录相关的信息。
- `title`：目前大多数浏览器忽略这个参数，可以传空字符串。
- `url`：新 URL 地址，不会触发页面加载。
- 用途：
- 在用户点击链接或执行某些操作时，更新 URL 并将新状态添加到历史栈中。
- 常用于单页应用中实现“前进/后退”功能。
2. `replaceState()`
- 语法：
```javascript
history.replaceState(state, title, url);
```
- 参数说明：
- 参数与 `pushState()` 相同，但不会添加新条目，而是替换当前的历史记录。
- 用途：
- 当需要更新当前页面的 URL 而不希望用户通过“后退”按钮回到旧状态时使用。
- 比如登录成功后跳转页面，可能不需要保留之前的登录页面记录。
三、注意事项
- 这两个 API 不会触发页面重新加载，因此页面内容需要手动更新。
- 使用时需确保目标 URL 是当前网站的子路径，否则可能会引发安全错误。
- 浏览器兼容性较好，主流现代浏览器均支持。
四、总结
HTML5 的 `pushState()` 和 `replaceState()` 为前端开发带来了极大的灵活性，尤其是在构建单页应用时，能够有效提升用户体验和页面性能。掌握这两个 API 是现代 Web 开发者必备技能之一。