HTML5 History API

引言

HTML5 History API 为开发者提供在不刷新浏览器页面的状况下修改 URL 的能力，在这以前，若是开发者修改 url 就会全页面刷新。History API 能够让咱们灵活控制浏览器地址栏线上的内容，为咱们的开发提供了更多的便利。在今天，单页面应用大行其道，除了 ajax 技术以外，History API 也功不可没，它为咱们提供了更友好的地址栏接口，让地址栏地址更可读。

History 对象

在浏览器的控制台中，查看history，咱们能够看到 History 为咱们提供的属性和方法。

属性

• history.lenght
  历史回话个数，这个个数包括当前页，当打开一个浏览器的空白页面时，history.lenght = 1。
• history.state
  当前回话的 state，state 能够是任意类型，它有 history.pushState 或 history.replaceState 的第一个参数定义。

方法

• history.go([number]) 浏览器前进或回退指定步骤。参数小于 0 时，浏览器回退指定的步骤，参数大于 0 时，浏览器前进指定的步骤。若是参数值太大或者过小时，方法无效果。

• history.back() 浏览器回退到前一个页面。至关于点击浏览器的回退按钮。等价于 history.go(-1)。

• history.forward() 浏览器前进到后一个页面。至关于点击浏览器的前进按钮。等价于 history.go(1)。

• history.pushState([data], [title], [url]) 向 history 栈中添加一个会话。参数 data 为会话中数据，能够开发者自定义。title 为页面标题，如今尚未浏览器支持。url 为会话的 url。pushState 后，浏览器地址栏会跟着变化，但页面不会刷新，history.length 的值 +1。

• history.replaceState([data], [title], [url]) 修改 history 中当前的会话。参数 data 为会话中数据，能够开发者自定义。title 为页面标题，如今尚未浏览器支持。url 为会话的 url。replaceState 后，浏览器地址栏会跟着变化，但页面不会刷新，history.length 的值不变。

事件

• popstate 浏览器回退时触发 popstate 事件。history.back() 和 history.go([number < 0]) 时也会触发 popstate 事件。