history新特性pushState、replaceState

history，就是历史记录，h5的新特性是加入了pushState与replaceState,我的理解是改变location的hash值做到无刷新页面的路由跳转，并且携带了state的相关状态信息。

先对history先作一个简要说明。

history.back()就是回退；这个方法会像用户点击了浏览器工具栏上的返回键一样。
history.forward()是前进一页；
history.go(n)根据n的值来浏览器来处理前进一页还是后退一页,当n=0时，此时是刷新页面；

此时再说一下popstate方法；MDN的概要是这么说的：

popstate窗口上事件的事件处理程序。

popstate每次活动历史记录条目在同一文档的两个历史记录条目之间改变时，将事件分派到窗口。如果被激活的历史记录条目是通过调用创建的，
history.pushState()或者被调用影响history.replaceState()，
则popstate事件的state属性包含历史条目的状态对象的副本。

 简单理解就是：

pushState,replaceState都不会触发popstate的方法，仅当用户在相同文档的两个历史条目之间导航时才触发事件。如果当下有多个历史记录，back(),go(n)触发了路由哈希的改变，就会触发该事件。

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

我们来打开页面看下history

发现这个时候history的length是 1,state是null;下面我们来使用一下pushState，

history.pushState({page: 1}, "title 1", "?page=1");

此时的history变成这样

我们发现state中有了page的值，就是我们pushState传入的状态值，并且length+1了；

然后我们再pushState一次效果是这样，说明每次pushState会改变state的值，并且会让history的栈里面多推入一个。额，也不知道形容的对不对，我猜大家应该懂我想表达的意思。

下面说一下replaceState，其实跟pushState差不多，只是replaceState()修改当前历史记录条目，而不是创建一个新的。

history.replaceState({page: 4}, "title 4", "?page=4");

 

可以看到length没有改变，只是修改了history的state的page值。

总结：pushState也就是往history里放一个状态值，并且创建一个新的历史记录；replaceState修改history的状态值，不创建新的历史记录。popstate只在历史记录发生哈希值改变的情况下触发。

 本文是基于如下链接做的自我解读，如若理解有误，还请指出。大家共同学习进步。

链接：https://developer.mozilla.org/en-US/docs/Web/API/History_API