历史（history）是指浏览器跟踪用户访问过哪些URL的一种机制。MDN（Mozilla Developer Network）则是火狐浏览器官方维护的开发者文档网站。historyMDN则是以history为中心来描述历史相关API的一个MDN页面。在本文中，我们将从多个角度对historyMDN做出详细阐述。
一、historyMDN的基本介绍
historyMDN页面的URL是https://developer.mozilla.org/en-US/docs/Web/API/History_API。页面的主体分为以下几个部分：
- 概述（Summary）：简单介绍了页面所描述的API的用途和相关概念。
- 方法和属性（Methods and properties）：列表形式展示了API的所有方法和属性，并提供对应的用途和详细文档链接。
- 示例（Examples）：为开发者提供了使用API的实际案例和对应的代码。
- 规范（Specifications）：列出API相关的规范文件和版本历史。
二、historyMDN的使用指南
使用historyMDN可以让我们快速了解和使用history相关的API。具体流程如下：
- 在浏览器中输入
https://developer.mozilla.org/en-US/docs/Web/API/History_API进入historyMDN页面。 - 查看概述，了解API的基本用途和相关概念。
- 查看方法和属性列表，找到需要用到的方法或属性，点击对应文档链接，查看详细使用说明和参数说明。
- 如果需要使用实例，点击示例列表中的对应链接进入示例页面，复制代码进行使用。
三、historyMDN的主要API
1. pushState()
pushState()方法可以给浏览器历史栈中加入一条记录，同时还可以修改当前浏览器的url。该方法适合在页面ajax请求后，将当前页面的url进行修改，防止刷新后丢失请求结果。使用方法如下：
history.pushState(state, title, url);
其中，state参数表示为一个JS对象，用来保存当前页面状态信息；title参数表示为一个可以显式的页面标题；url参数则表示为修改后的浏览器url。
2. replaceState()
replaceState()方法与pushState()类似，都是用来修改浏览器历史栈中的一条记录。不同的是，replaceState()方法并不会像pushState()那样新增一条记录，而是在当前历史记录上进行修改。使用方法如下：
history.replaceState(state, title, url);
3. back()
back()方法可以让浏览器回退到历史栈中的上一条记录。该方法适合在需要回退到上一个页面状态时使用。使用方法如下：
history.back();
4. forward()
forward()方法可以让浏览器前进到历史栈中的下一条记录。该方法适合在回退后需要重新前进到当前页面状态时使用。使用方法如下：
history.forward();
四、historyMDN的示例
下面是一个简单的pushState()示例，可以让开发者更好的使用historyMDN提供的API：
window.addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
event.preventDefault();
const url = event.target.getAttribute('href');
const title = event.target.textContent;
// 修改当前浏览器url
history.pushState({ url, title }, title, url);
// 发起ajax请求...
}
});
五、historyMDN的规范
historyMDN所描述的API的规范文件为HTML Living Standard。该规范文件定义了所有HTML元素和属性的语法、语义和属性值。
