从 HTML5 开始，我们可以开始操作这个历史记录堆栈。
1.History
使用 back(),forward(), 和 go() 方法可以在用户的历史记录中前进和后退
前进和后退
后退：
window.history.back();
这个方法会像用户点击了浏览器工具栏上的返回键一样。
同样的，也可以用以下方法产生用户前进行为：
window.history.forward();
移动到历史记录中特定的位置
你可以使用 go() 方法从 session 历史中载入特定的页面。
向后移动一页：
window.history.go(-1);
向前移动一页：
window.history.go(1);
类似的，你可以前进或者后退多页。
还可以通过检查浏览器历史记录的 length 属性来找到历史记录堆栈中的页面总数。
var numberOfEntries = window.history.length;
注意 : IE 支持向 go() 方法传 URL 参数。
2.添加和修改history实体
自 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
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html"); 这种方法将会使 url 地址栏显示 http://mozilla.org/bar.html ，但浏览器不会加载 bar.html 页面，即使这个页面存在也不会加载。
现在再次假设用户继续访问 http://google测试数据 ，然后点击后退。这时， url 地址栏将会， http://mozilla.org/bar.html ，页面会得到 popstate 事件（ chrome ），这个状态对象会包含一个 stateObj 的 copy 。这个页面看起来像 foo.html 。 +
这时，我们再次点击后退， URL 将变成 http://mozilla.org/foo.html ， document 将得到另一个 popstate 事件和为 null 的 state 对象。这次的返回动作并没有改变文档的内容。（也许会过一会尝试加载 …chrome ）
pushState方法pushState() 有三个参数 :state 对象，标题 ( 现在是被忽略，未作处理 ) ， URL( 可选 ) 。具体细节：
· state 对象 –state对象是一个 JavaScript对象，它关系到由 pushState()方法创建出来的新的 history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。 State对象可以是任何 Json字符串。因为 firefox会使用用户的硬盘来存取 state对象，这个对象的最大存储空间为 640k。如果大于这个数 值，则 pushState()方法会抛出一个异常。如果确实需要更多的空间来存储，请使用本地存储。
· title —firefox现在回忽略这个参数，虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串，以防止将来的修改。或者可以传一个简短的标题来表示 state
· URL —这个参数用来传递新的 history实体的 URL，注意浏览器将不会在调用 pushState()方法后加载这个 URL。但也许会过一会尝试加载这个 URL。比如在用户重启了浏览器后，新的 url可以不是绝对路径。如果是相对路径，那么它会相对于现有的 url。新的 url必须和现有的 url同域，否则 pushState()将抛出异常。这个参数是选填的，如果为空，则会被置为 document当前的 url。
某种意义上来说，调用 pushState() 方法很像设置了 window.location = “#foo”, 这两者都会创建和激活另一个关联到当前 document 的 history 实体，但 pushState() 另外有一些优点：
l 新的 url 可以是任何和当前 url 同域的 url ，相比之下，如果只设置 hash ， window.location 会保持在同一个 document 。
l 如果不需要，你可以不修改 url 。对比而言，设置 window.location = “#foo”; 仅产生新的 history 实体，如果你当前的 hash 不是 #foo
l 你可以将任意的数据与你的新 history 实体关联。使用基于 hash 的方法，需要将所有相关的数据编码为一个短字符串。
注意， pushState() 方法不会使 hashchange 时间发生，即使是新旧 url 只是 hash 不同。
replaceState()方法history.replaceState() 用起来很像 pushState() ，除了 replaceState() 是用来修改当前的 history 实体而不是创建一个新的。这个方法有时会很有用，当 你需要对某些用户行为作反应而更新一个 state 对象或者当前 history 实体时，可以使用它来更新 state 对象或者当前 history 实体的 url 。
popstate事件当 history 实体被改变时， popstate 事件将会发生。如果 history 实体是有 pushState 和 replaceState 方法产生的， popstate 事件的 state 属性会包含一份来自 history 实体的 state 对象的拷贝
详见 window.onpopstate
读取当前的 state当页面加载时，它可能会有一个非空的 state 对象。这可能发生在当页面设置一个 state 对象 ( 使用 pushState 或者 replaceState) 之后用户重启了浏览器。当页面重新加载，页面将收到 onload 事件，但不会有 popstate 事件。然而，如果你读取 history.state 属性，将在 popstate 事件发生后得到这个 state 对象
var currentState = history.state;
Browsers: Tested and Working In
HTML5 Browsers
Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers
IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3
【相关推荐】
1. 特别推荐 ：“php程序员工具箱”V0.1版本下载
2. js中的window.history的用法（一）
3. js中的window.history的用法（二）
4. 详细介绍h5中的history.pushState()使用实例
5. h5中History API 对Web应用的影响
以上就是深入了解h5中history特性--pushState、replaceState的详细内容，更多请关注Gxl网其它相关文章！
查看更多关于深入了解h5中history特性--pushState、replaceState的详细内容...