html5history.pushstate有什么用？

HTML5为history对象添加了两个新方法，history.pushState() 和 history.replaceState()，用来在浏览历史中添加和修改记录。所有主流浏览器都支持该方法（包括IE10）。

if (!!(window.history &&history.pushState)){

// 支持History API

} else {

// 不支持

}

上面代码可以用来检查，当前浏览器是否支持History API。如果不支持的话，可以考虑使用Polyfill库History.js。

history.pushState方法接受三个参数，依次为：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

简而言之就是HTML5新增的用来控制浏览器历史记录的api。

window.history 对象，该对象上包含有 length 和 state 的两个值，在它的 __proto__ 上继承有 back 、 forward 、 go 等几个功能函数

在 popstate 之前，我们可以利用 back 、 forward 、 go 对 history 进行后退和前进 *** 作。

例如：

弊端：只能 *** 作前进后退，但是无法控制前进后要去哪， history.length 都只会维持原来的状态

HTML5 的新 API 扩展了 window.history ，使历史记录点更加开放了。可以存储当前历史记录点 pushState 、替换当前历史记录点 replaceState 、监听历史记录点 popstate 。

pushState 、 replaceState 两者用法差不多。

使用方法：

replaceState用法类似，例如：

两者区别 ： pushState 会改变 history.length ，而 replaceState 不改变 history.length

通过下图我们可以对比看出 pushState 和 replaceState 的差别（注意看 history.length 的变化）：

当活动历史记录条目更改时，将触发 popstate 事件。如果被激活的历史记录条目是通过对 history.pushState 的调用创建的，或者受到对 history.replaceState 的调用的影响， popstate 事件的 state 属性包含历史条目的状态对象的副本。

可以理解为监听浏览器后退、前进的 *** 作，只要后退或者前进就会触发。在上面的 demo 中，我们预先做了如下 *** 作： 打开页面 → 点击“新闻” → 点击“音乐” → 再点击“新闻”，产生了4个 history 记录。然后监听浏览器后退和前进的状态变化，如下图所示：

pushState 是人工插入历史记录和修改地址栏,此时地址栏虽然修改,但并不触发网页跳转,换句话说就是给看的而已,第一个参数是一个对象,可以放入需要的参数,第二个理论上标题名称,但据说无效什么的,第三个就是url.这是地址栏里显示的东西.

popState 是点击浏览器的返回按钮就会触发,如果有push数据,就会在事件中获得state数据,里面就是pushState的第一个参数里的数据.

为了做微信的单页面结构,使用了这些功能,对一些需要特殊 *** 作的链接进行接管,点击这类链接就用pushState插入历史记录,并修改地址栏,然后用ajax获取链接的内容添加到document中去,接着隐藏当前的内容块,显示新获取的内容块.

因为本身ajax获取内容并不会引起历史记录的变化,所以用户本能的点击返回按钮想回退到上一个内容页的时候,会无效,所以这里需要用pushState填入返回需要的数据,并自己在popState里处理对应的隐藏现在的内容块,显示上一个内容块的 *** 作.

---