h5中的history方法API学习

H5中新增加的history API的属性和方法

属性

history.length：只读。返回一个整数，代表了会话历史中元素的数目，包括了当前的加载页，在一个新选项卡中加载一个页面，length返回的是1。

history.scrollRestoration:允许web应用程序在历史导航上显式地设置默认滚动恢复行动，此属性可以是auto自动的也可以是manual手动的

也就是说如果浏览器支持history.scrollRestoration并且值为auto则会默认的恢复滚动行为，如果设置为manual则可以取消

使用的话可以判断一下window.history.scrollRestoration && (window.history.scrollRestoration = 'auto');

history.state:只读。浏览器在当前的url下面给出的一个状态信息，如果没用过pushState或者replaceState的返回的是null

方法

history.back():前往上一页，可以点击浏览器的左上角的返回按钮模拟这个方法，等同于history.go(-1)

history.forward():在浏览历史中前往下一页，可以点击浏览器的左上角的前进按钮模拟这个方法。等同于history.go(1)

history.go():通过当前页面的相对位置从浏览历史中加载页面，参数为-1代表着上一页，参数为1代表着下一页。当参数超出了界限或者没有参数传入或者不是整数的时候没有效果也不会报错

history.pushState():将指定的名称和 URL（如果提供该参数）将数据 push 进会话历史栈，在浏览器上也不会造成页面刷新。

history.replaceState():将指定的数据，名称和 URL（如果提供该参数），更新历史栈上最新的入口，在浏览器上也不会造成页面刷新。

这两个方法有三个参数：

1. state对象：是一个 JavaScript 对象，它与创建的新历史记录条目相关联。每当用户导航到新状态时，popstate 都会触发事件，并且 state 事件的属性包含历史记录条目的状态对象的副本。
   状态对象可以是任何可以序列化的对象。因为 Firefox 将状态对象保存到用户的磁盘，因此可以在用户重新启动浏览器后恢复它们，因此我们在状态对象的序列化表示强加了 640k 字符的大小限制。
2. title:页面标题，很多浏览器都会忽略此参数。
3. url:历史记录条目的 URL 由此参数指定。请注意，浏览器在调用后不会尝试加载此 URL，但可能会稍后尝试加载 URL，例如在用户重新启动浏览器之后。新 URL 不一定是绝对的；如果是相对的，则相当于当前 URL 进行解析。新 URL 必须与当前 URL 的源相同；否则，pushState() 将抛出异常。此参数可选，如果未指定，则将其设置为文档当前的 URL。不能跨域。