1. history(H5)
Window.history保存用户在一个会话期间的网站访问记录，用户每次访问一个新的URL即创建一个新的历史记录。
1.1 length
返回浏览器历史列表中的 URL 数量。
1.2 scrollRestoration[H5]
目前（2018.01）这是一个实验性的API，请勿在生产环境中使用它。
允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
1.3 state
该参数与pushState和replaceState配合使用，它始终表示当前页面（使用pushState或replaceState创建的）的state状态值。
1.4 go/back/forward
history.back()和history.forward()分别表示向后一页和向前一页。
history.go(num)表示向前或向后翻多少页，num为正数表示向前翻，为负数则向后翻。
history.back()等价于history.go(-1)，history.forward()等价于history.go(1)。
执行这三个中的任一方法，触发浏览器的popstate事件，如果只是hash部分发生变化，还可能同时触发hashchange事件。
1.5 pushState/replaceState[H5]
HTML5新增的两个API。
history.pushState(state, title, url)
意思就是把一个history记录插入到历史记录中。state：与要跳转到的URL对应的状态信息。title：页面标题。url：要跳转到的URL地址，不能跨域。
history.replaceState(state, title, url)
用新的state和URL替换当前。不会造成页面刷新。state：与要跳转到的URL对应的状态信息。title：页面标题。url：要跳转到的URL地址，不能跨域。
与之相关的事件window.onpopstate。详参22.1 见下方。
参数详解
state： 状态对象是一个由 pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。（译者注：总而言之，它存储JSON字符串，可以用在popstate事件中。）state 对象可以是任何可以序列化的东西。由于 火狐 会将这些对象存储在用户的磁盘上，所以用户在重启浏览器之后这些state对象会恢复，我们施加一个最大640k 的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象，这个方法将扔出一个异常。如果你需要更多的空间，推荐使用sessionStorage或者localStorage。
title：火狐浏览器现在已经忽略此参数，将来也许可能被使用。考虑到将来有可能的改变，传递一个空字符串是安全的做法。当然，你可以传递一个短标题给你要转变成的状态。（译者注：现在大多数浏览器不支持或者忽略这个参数，最好用null代替）。
URL：这个参数提供了新历史纪录的地址。请注意，浏览器在调用pushState()方法后不会去加载这个URL，但有可能在之后会这样做，比如用户重启浏览器之后。新的URL不一定要是绝对地址，如果它是相对的，它一定是相对于当前的URL。新URL必须和当前URL在同一个源下；否则，pushState() 将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL。
优势
一些情况下，调用pushState和设置 window.location = "#foo"相当，这种状况下，这两种行为都会创建和激活另一个和当前页面有关的历史纪录。但是pushState()有其他优势：
新URL可以是当前URL同源下的任意地址。相反的，设置window.location会让你保持在相同页面，除非你只修改hash.
如果不必要，你可以不改变URL，相反的，将window.location设定为“#foo”；只会创建一个新的历史纪录，如果当前hash不为#foo.
You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.你可以关联任意的数据到你的新历史纪录中。使用基于hash的方法，你需要将所有相关 的数据编码为一个短字符串。
注意
请注意pushState()和replaceState()方法绝不会导致hashchange 事件被激活，即使新的URL和旧的只在hash上有区别。
1.6 onpopstate[H5]
当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState() 的调用创建的，或者受到对history.replaceState() 的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。详参6.5 见上方。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）
不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。
有兼容性问题：浏览器兼容性。
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
需要注意的是，使用history.pushState和history.replaceState两个API改变的浏览器历史记录才能触发该事件（通过location.hash改变URL也会触发该事件），其他的方式比如点击按钮进行的页面导航，不会触发该事件。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"></head>
<body>
<script>
window.onpopstate = function(event) {
alert('ok');
};
function changeURL (){
location.search = '?page=1';
}
function changeState (){
history.pushState('nDos','title','?nDos=1')
}
</script>
<button value="点击导航到下一个页面" onclick = 'changeURL()'>点击导航到下一个页面</button>
<button value="点击添加状态" onclick = 'changeState()'>点击添加状态</button>
</body>
</html>
上述代码运行后，点击浏览器回退按钮，只有第一次回退触发了onpopstate事件。将上述location.search = '?page=1';改为location.hash = '#page';点击按钮马上就会触发onpopstate事件。
来源：https://www.cnblogs.com/ndos/p/8233021.html