HTML5 history新特性pushState、replaceState及两者的区别

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

从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.com，然后点击后退。这时，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()另外有一些优点：

新的url可以是任何和当前url同域的url，相比之下，如果只设置hash，window.location会保持在同一个document。

如果不需要，你可以不修改url。对比而言，设置window.location = “#foo”;仅产生新的history实体，如果你当前的hash不是#foo

你可以将任意的数据与你的新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对象。这可能发生在当页面设置一个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

pushstate与replacestate区别

history.pushstate(state, title, url)

--------------------------------------------------------------------------------

将当前url和history.state加入到history中，并用新的state和url替换当前。不会造成页面刷新。

state：与要跳转到的url对应的状态信息。

title：可以不传

url：要跳转到的url地址，不能跨域。

history.replacestate(state, title, url)

--------------------------------------------------------------------------------

用新的state和url替换当前。不会造成页面刷新。

state：与要跳转到的url对应的状态信息。

title：可以不传

url：要跳转到的url地址，不能跨域。

--------------------------------------------------------------------------------

两者看似没有区别，其实区别很大的，pushstate是添加历史记录的，而replacestate是不添加的。