history对象和HTML5 History API

一、浏览器的history对象

1.history对象简介

History对象是window对象的一部分，包含用户访问过的URL，可以通过window.history访问。所有浏览器都支持这个对象。

2.history对象属性

length:返回历史列表中的网址数。
如果当前窗口访问了一个网址，那么history.length属性就为1。

3.history对象方法

• history.back()：返回上一个访问的页面，等同于浏览器的返回按钮。
• history.forward()：移动到下一个访问页面，等同于浏览器的前进按钮。

• history.go()：参数为一个整数，history.go(-1)等同于history.backd()；history.go(1)等同于history.forward()；history.go(0)相当于刷新页面。

  二、HTML5的History API

  1.HTML5的History API和浏览器的history对象区别

  两者是新版本和旧版本的关系。HTML5的History API是HTML5提供对history栈中内容的操作，它比DOM window对象的history对象多了两个属性，两个方法。写法均可以为history。

  2.增加的属性

  • History.state()：返回一个表示历史堆栈顶部的状态的值，这是一种可以不必等待popstate事件而查看状态的方式。
  • History.scrollRestortion()：允许Web应用程序在历史导航上显示地设置默认滚动恢复行为。此属性可以是自动的（auto），或者手动的（manual）。

  3.增加的方法

  • History.pushState()：按指定的名称和URL(如果提供该参数)，将数据push进会话历史栈，数据被DOM进行不透明处理，你可以指定任何可以被序列化的js对象。
  • History.replaceState()：按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。这个数据被DOM进行了不透明处理。你可以指定任何可以被序列化的js对象。

下面对这两个方法进行详细的介绍：

pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.

状态对象 — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。

状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，我们规定了状态对象在序列化表示后有640k的大小限制。如果你给 pushState() 方法传了一个序列化后大于640k的状态对象，该方法会抛出异常。如果你需要更大的空间，建议使用 sessionStorage 以及 localStorage.

标题 — Firefox 目前忽略这个参数，但未来可能会用到。传递一个空字符串在这里是安全的，而在将来这是不安全的。二选一的话，你可以为跳转的state传递一个短标题。

URL — 该参数定义了新的历史URL记录。注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。该参数是可选的，缺省为当前URL。

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

history.replaceState()的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。

replaceState() 的使用场景在于为了响应用户操作，你想要更新状态对象state或者当前历史记录的URL。

history.replaceState(stateObj, "page 3", "bar2.html");

MDN相关介绍
HTML5 History API详解