深入了解h5中history特性--pushState、replaceState-木庄网络博客

本文摘自PHP中文网，作者零下一度，侵删。

DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取，让你可以在用户的访问记录中前进和后退。

从HTML5开始，我们可以开始操作这个历史记录堆栈。

1.History

使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退

后退：

1	`window.history.back();`

这个方法会像用户点击了浏览器工具栏上的返回键一样。

同样的，也可以用以下方法产生用户前进行为：

1	`window.history.forward();`

你可以使用go()方法从session历史中载入特定的页面。

向后移动一页：

1	`window.history.go(-1);`

向前移动一页：

1	`window.history.go(1);`

类似的，你可以前进或者后退多页。

还可以通过检查浏览器历史记录的length属性来找到历史记录堆栈中的页面总数。

1	`var numberOfEntries = window.history.length;`

注意:IE支持向go()方法传URL参数。

自Gecko2开始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5引入了histtory.pushState()和history.replaceState()这两个方法，他们允许添加和修改history实体。同时，这些方法会和window.onpostate事件一起工作。

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。

pushState 用于向 history 添加当前页面的记录，而 replaceState 和 pushState 的用法完全一样，唯一的区别就是它用于修改当前页面在 history 中的记录。

假设http://mozilla.org/foo.html页面执行了一下JS

1	`var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");`

这种方法将会使url地址栏显示http://mozilla.org/bar.html，但浏览器不会加载bar.html页面，即使这个页面存在也不会加载。

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者