操纵浏览器的历史记录——|操纵浏览器的历史记录—— history 对象操纵浏览器的历史记录——h

window 对象通过 history 对象提供对览器历史记录的访问能力。在 HTML5 中，history 对象还具有了操纵浏览器历史记录的能力。
历史记录访问 length 属性可以访问历史记录对象的长度。

history.length

forward 和 back 方法如同浏览器的前进和后退功能。

history.forward() history.back()

go 方法可以通过指定一个相对于当前页面的索引值来跳转到相应的记录。

history.go(1)# 等同于 histroy.forward() hsitory.go(-2)

操纵历史记录就如同你能够从绝大部分有关 JavaScript 书上看到的，ajax 的风靡让大众开始正视 JavaScript 这门语言，然而 ajax 构建的在线应用有一个众所周知的问题——用户无法有效利用浏览器的后退和前进功能。而这一问题也通过 HTML5 规范得到了有效的解决。通过 pushState 和 replaceState 方法可以允许你添加或修改浏览器的历史记录。
pushState 方法能够将当前页面地址保存为最近一条历史记录，同时修改当前页面地址。但是不会加载该页面。
假设当前页面地址为 http://www.example.com/page1，代码如下：

history.pushState({foo: "bar}, "page 2", "/page2"); history.back(); # 跳转到 http://www.example.com/page1

代码示意的过程很简单，具体看看 pushState 的参数，一共接受三个参数分别是状态对象、标题和 URL。

URL：其中 URL 为具体的地址（再次说明，修改了地址栏中的地址，但是页面不会主动加载），可以是相对地址，也可以是绝对地址，但是传入地址必须与当前地址同源，否则会报错。
标题：一个简短的标题，表明要进入的状态。但是现在的绝大部分浏览器都会忽略它，可以传入空字符串
状态对象：一个与创建的历史记录相关联的 JavaScript 对象。当用户访问该历史记录时，popstatge 事件（下边有讲解）触发时，该事件对象的 state 属性就是这个状态对象的一个拷贝。

值得注意有亮点，其一，使用 history.pushState() 会改变 referrer 的值，而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值。其二，pushState 方法永远不会触发hashchange事件，即便新的地址只变更了hash。
replaceState 方法与 pushState 很相似，区别在于它不是创建新的历史条目，而仅仅是修改当前页面的地址。
popstate 事件当历史条目被访问时，popstate 事件就会被触发。window.onpopstate 是 popstate 事件在 window 上的事件句柄。如果当前处于激活状态的历史记录条目是 pushState 方法创建，或者由 replaceState 方法修改过的，则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; //绑定事件处理函数. history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1 history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2 history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为2 history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // 弹出 "location: http://example.com/example.html, state: null history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

另外，还有一种能够访问 pushState 和 replaceState 绑定状态对象的方法是，在当前页面直接调用