H5 之 History API

• History 对象包含用户（在浏览器窗口中）访问过的 URL。
• History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
• 允许操纵浏览器会话历史记录，即在当前页面所加载的选项卡或框架中访问的页面。

length（只读）

返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回 1。 例如有三个Html a,b,c,我们跳转a->b->c,那么c中的length就是3。

a.html

<a href="b.html">跳b</a>

b.html

<a href="b.html">跳c</a>

c.html

<script>
    console.log(window.history.length)
</script>

scrollRestoration

允许Web应用程序在历史记录导航上显式设置默认滚动恢复行为。此属性可以是auto或manual。

const scrollRestoration = history.scrollRestoration
if (scrollRestoration === 'manual') {
  console.log('The location on the page is not restored, user will need to scroll manually.');
}

state (只读)

浏览器在当前URL下给出的一个状态信息。如果没有使用history.pushState,history.replaceState触动过时，为默认值null

back()

该方法使浏览器在会话历史记录中后退一页。与调用具有相同的作用history.go(-1)。如果没有上一页，则此方法调用不执行任何操作。

history.back()

forward()

在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法，等价于 history.go(1)。

history.forward()

go()

该方法从会话历史记录中加载特定页面。您可以使用它在历史记录中前后移动，具体取决于参数的值。

history.go([delta])

pushState()

该方法将条目添加到浏览器的会话历史记录堆栈中。

history.pushState(state, title [, url])

state对象

是一个 JavaScript 对象，它与创建的新历史记录条目相关联。每当用户导航到新状态时，popstate 都会触发事件，并且 state 事件的属性包含历史记录条目的状态对象的副本。 状态对象可以是任何可以序列化的对象。因为 Firefox 将状态对象保存到用户的磁盘，因此可以在用户重新启动浏览器后恢复它们，因此我们在状态对象的序列化表示强加了 640k 字符的大小限制。

title

Firefox 目前忽略了这个参数，虽然它可能在将来使用它。可以传入一个 null。

URL

此历史记录条目的 URL 由此参数指定。请注意，浏览器在调用后不会尝试加载此 URL，但可能会稍后尝试加载 URL，例如在用户重新启动浏览器之后。新 URL 不一定是绝对的；如果是相对的，则相当于当前 URL 进行解析。新 URL 必须与当前 URL 的源相同；否则，pushState() 将抛出异常。此参数可选，如果未指定，则将其设置为文档当前的 URL。

const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'

history.pushState(state, title, url)

replaceState()

history.replaceState(stateObj, title, [url])

stateObj

状态对象是一个JavaScript对象，它与传递给该replaceState方法的历史记录条目相关联。状态对象可以是 null。

title

当前大多数浏览器都忽略此参数，尽管将来可能会使用它。在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为该州传递简短的标题。

url

可选的历史记录条目的URL。新网址必须与当前网址具有相同的来源；否则replaceState会引发异常。

popstate

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）

window.addEventListener("popstate", function() {
   // 取出 设置好的 history.state 值，做判断
 });