History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。
History 对象属性
| 属性 | 描述 |
|---|---|
| length | 返回浏览器历史列表中的 URL 数量。 |
History 对象方法
| 方法 | 描述 |
|---|---|
| back() | 加载 history 列表中的前一个 URL。浏览器后退键 |
| forward() | 加载 history 列表中的下一个 URL。浏览器前进键 |
| go(n) | 加载 history 列表中的某个具体页面。 |
//跳转，n>0 前进n步；n<0 后退n步；n=0 刷新本页；
history.go(1); //===forward(); 前进1步
history.go(-1); //===back(); 后退1步
history.go(); //===go(0) , 刷新本页
以上跳转超过历史记录边界，静默失败。
HTML5 History API 增加
只增加2个方法1个事件1个属性，IE9-浏览器不支持
2个方法: history.pushState() history.replaceState()
| 方法 | 描述 |
|---|---|
| pushState() | 向浏览器历史添加一个记录。产生新的记录，不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化 |
| replaceState() | 与pushState唯一区别，替代URL，不新生成历史记录 |
方法：
history.pushState(state, title, url);
-
state object：状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null -
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null -
URL： 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL
//eg.
var state = { 'page_id': 1, 'user_id': 5 };
var url = '?showPage=1';
history.pushState(state, "", url);
1个事件：window.onpopstate
只有点击浏览器的“前进”、“后退”这些导航按钮，或者是由JavaScript调用的history.back()等导航方法，且切换前后的两条历史记录都属于同一个网页文档，才会触发本事件。前2个方法第一个参数传入的state，也会在事件参数中event.state。
//监听事件
window.onpopstate = function (event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
};
注意：history.pushState()及history.replaceState()本身调用时是不触发popstate事件的。
1个属性：history.state
返回当前history记录的state，由前2个方法history.pushState()及history.replaceState()传入。
let state = history.state; //# state: { 'page_id': 1, 'user_id': 5 }
兼容性
HTML5新增的history方法IE10+及其他主流浏览器都支持HTML5 history API
可进行其API代码判断。
var isHistoryApi = !!(window.history && history.pushState);
网友评论