详解window.history

Window.history保存用户在一个会话期间的网站访问记录，用户每次访问一个新的URL即创建一个新的历史记录。

history.go()、history.back()、history.forward()

history.back()和history.forward()分别表示向后一页和向前一页。

history.go(num)表示向前或向后翻多少页，num为正数表示向前翻，为负数则向后翻。

History.back()等价于history.go(-1)，history.forward()等价于history.go(1)。

执行这三个中的任一方法，触发浏览器的popstate事件，如果只是hash部分发生变化，还可能同时触发hashchange事件。

修改网站路径并创建新的历史记录

history.pushState(statedata, title, url);

参数URL必须和当前URL同源，否则会报错。只可以修改URL中井号之后的片段（即hash）或者URL中问号（？）之后的查询区段。

每执行一次pushState()用新的URL替换掉当前URL，即地址栏URL会变，window.location.href也会变，同时创建一个新的历史记录。但执行pushState()永远不触发hashchange事件。

参数statedata可以是任何被序列化的数据，这些数据被保存在用户硬盘上。但状态数据有大小限制，比如Firefox只允许640KB字符。

使用pushState()的好处：只改URL的hash部分，window.location使用的是同一个document。

兼容性问题

pushState直到IE10才被支持，在早版本的IE中只能通过修改window.location=”#foo”完成，但这样会触发hashchange事件。

修改网站路径但不创建新的历史记录

看标题就知道了，replaceState()和pushState()的唯一区别是不创建新的历史记录，而是直接修改当前历史记录。

history.replaceState(stateData, title, url);

事件

popstate事件

调用history.back()、history.forward()、history.go()、history.replaceState()等方法，会触发popstate事件。

访问事件的state属性可获取当初pushState()或replaceState()设置的状态数据。