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 事件。