转自： https://blog.csdn.net/q1056843325/article/details/60607402
history.pushState(stateObject, title, url)
包含三个参数
分别是状态对象、新状态标题和可选参数相对URL
第一个参数状态对象应该传入提供页面状态信息的数据
第二个参数还没有浏览器实现
添加也没有什么用，所以可以传入一个空字符串
如果使用了第三个参数，那么执行这个函数后，浏览器地址也会更新
但是不会真的向服务器发送请求
当我们从状态栈中的一个状态跳到另一个状态popstate事件就会触发
（浏览器前后翻页触发，刷新页面不触发）
它的事件对象中有一个state属性存储着当初传递给pushState()的状态对象
下面通过一个小例子来解释一下
<button id="next">下一页</button>
当前页数：<span id="cur">0</span>
image.png
要实现点击下一页，然后当前页数对应增加
var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0; //表示当前页数
next.onclick = function(){
page++;
cur.innerHTML = page;
}
这时我们还不能使用浏览器的上下翻页
image.png
现在使用history API来添加一些代码
var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){
page++;
history.pushState({page: page}, '','?page=' + page);
//状态对象中存储当前页数
cur.innerHTML = page;
}
window.onpopstate = function(e){
if(e.state){
cur.innerHTML = e.state.page;
}else{
cur.innerHTML = 0;
}
}
image.png
动图链接地址： https://img-blog.csdn.net/20170307210514155?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcTEwNTY4NDMzMjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
当点击“后退”按钮回到最开始时（第0页）
因为没有状态，所以e.state值为null
replaceState
除此之外还有一个API用于更新状态
参数与pushState()前两个参数相同
调用这个方法就会重写当前的状态
也就是说替换当前的记录
<button id="next">下一页</button>
<button id="update">更新样式</button>
当前页数：<span id="cur">0</span>
var next = document.getElementById('next');
var update = document.getElementById('update');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){
page++;
history.pushState({page: page}, '','?page=' + page);
cur.innerHTML = page;
}
update.onclick = function(){
history.replaceState({page: history.state.page + '(已读)'},'');
//部分浏览器实现了history.state返回当前状态
}
window.onpopstate = function(e){
if(e.state){
cur.innerHTML = e.state.page;
}else{
cur.innerHTML = 0;
}
}
image.png
HTML5历史状态管理只有简单的几个函数
短短几行代码，就可以增加状态记录的功能
现在各个浏览器都实现了这个功能
image.png
