history.pushstate(),简述history的pushstate
DOM中的window对象通过window.history方法提供浏览器历史的读取，这样你就可以在用户的访问记录中前进后退。
从HTML5开始，我们可以开始操作这个历史堆栈。1.History
使用back()、forward()和go()方法在用户历史记录中向前和向后移动。
向前和向后
返回：复制代码代码如下：
window . history . back()；
这种方法就像用户点击浏览器工具栏上的后退键。
同样，用户的转发行为也可以通过以下方法生成：复制代码如下：
window . history . forward()；
移动到历史中的特定位置
您可以使用go()方法从会话历史中加载特定的页面。
后退一页：复制代码代码如下：
window . history . go(-1)；
向前移动一页：复制代码代码如下：
window . history . go(1)；
同样，您可以向前或向后移动多页。
您还可以通过检查浏览器历史的length属性来查找历史堆栈中的总页数。复制代码如下：
var number of entries=window . history . length；
注意：IE支持向go()方法传递URL参数。2.添加和修改history实体
从Gecko2(火狐4/雷鸟3.3/SeaMonkey 2.1)引入
HTML5引入了两个方法，histtory.pushState()和history.replaceState()，它们允许添加和修改历史实体。同时，这些方法将与window.onpostate事件一起工作。
使用history.pushState()方法修改referrer，该方法可在修改状态后为xmlhttpRequest对象创建的http头中使用。创建XMLHttpRequest时，referrer将是文档的URL。
pushState用于将当前页面的记录添加到历史记录中，而replaceState和PushState的用法完全相同，唯一的区别是它用于修改历史记录中当前页面的记录。
例子
假设http://mozilla.org/foo.html页面执行JS复制代码。代码如下：
var state obj={ foo: bar }；history.pushState(stateObj， page 2 ， bar . html )；
该方法将导致url地址栏显示http://mozilla.org/bar.html,但浏览器不会加载bar.html页面，即使该页面存在。
现在假设用户继续访问http://google.com，然后单击back。此时，url地址栏将是http://mozilla.org/bar.html,页面将获得popstate事件(chrome)，并且这个stateObject将包含状态obj的副本。这一页看起来像foo.html。
此时，我们再次单击back，URL将变成http://mozilla.org/foo.html,文档将获得另一个popstate事件和一个空状态对象。此返回操作不会更改文档的内容。(以后可能会尝试加载…chrome)pushState方法
PushState()有三个参数：状态对象、标题(现在已被忽略且未处理)和URL(可选)。具体细节：
状态对象状态对象是一个JavaScript对象，它与pushState()方法创建的新历史实体相关。用于存储要插入历史记录的条目的相关信息。状态对象可以是任何Json字符串。因为firefox会使用用户的硬盘来访问状态对象，所以这个对象的最大存储空间是640k。如果大于这个数字，pushState()方法将抛出一个异常。如果你真的需要更多的存储空间，请使用本地存储。
Title—Firefox现在会忽略这个参数，虽然将来可能会用到。现在最安全的使用方法是传递一个空字符串来防止将来的修改。或者您可以发送一个简短的标题来表明状态。
URL-此参数用于传递新历史实体的URL。注意，在调用pushState()方法后，浏览器不会加载这个URL。但也许以后会尝试加载这个URL。例如，在用户重新启动浏览器后，新的url可能不是绝对路径。如果是相对路径，它将相对于现有的url。新url必须与现有url在同一个域中，否则pushState()将引发异常。该参数是可选的。如果为空，将被设置为文档的当前url。
从某种意义上说，调用pushState()方法很像设置window.location="#foo "。它们都将创建并激活与当前文档相关联的另一个历史实体，但是pushState()有一些其他的优点：
新url可以是与当前url具有相同域的任何url。相反，如果只设置了hash，window.location将保留在同一个文档中。
如果不需要，可以保持url不变。相比之下，设置window.location=" # foo仅当当前散列不是#foo时，才生成新的历史实体。
您可以将任何数据与新的历史实体相关联。使用基于哈希的方法，所有相关数据都需要编码成一个短字符串。
注意，pushState()方法不会使hashchange时间发生，即使新的url和旧的URL只是hash不同。replaceState()方法
History.replaceState()与pushState()非常相似，只是replaceState()用于修改当前的历史实体，而不是创建新的历史实体。这种方法有时很有用。当您需要更新状态对象或当前历史实体以响应某些用户行为时，您可以使用它来更新状态对象或当前历史实体的url。popstate事件
当历史实体改变时，将发生popstate事件。如果历史实体是由pushState和replaceState方法生成的，则popState事件的State属性将包含历史实体中state对象的副本。
有关详细信息，请参见window.onpopstate。
读取当前状态
读取现有状态
当页面加载时，它可能有一个非空的状态对象。当用户在页面设置状态对象(使用pushState或replaceState)后重新启动浏览器时，可能会发生这种情况。当页面重新加载时，页面将接收onload事件，但不会有popstate事件。但是，如果您读取history.state属性，您将在popstate事件后获得此state对象。
var currentState=history.state
浏览器：在HTML5 Browsers 中测试和工作
Chrome 8，9，10
火狐4
Safari 5
歌剧11
Safari iOS 4.3
HTML4浏览器
IE6，7，8，9
火狐3
歌剧10
Safari 4
版本4.3之前的safari iOSpushState与replaceState区别
history.pushState(州、标题、url)
-
将当前URL和history.state添加到history中，并用新的状态和URL替换当前的。不会导致页面刷新。
State:对应于要跳转到的URL的状态信息。
题目：不要传。
Url:跳转到的URL地址，不能跨域。
history.replaceState(州、标题、url)
-
用新的状态和URL替换当前的。不会导致页面刷新。
State:对应于要跳转到的URL的状态信息。
题目：不要传。
Url:跳转到的URL地址，不能跨域。
-
两者看似没什么区别，其实差别很大。pushState添加了历史记录，而replaceState没有。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。