單頁應用巧用history.go()、history.length返回到歷史指定頁面

H5添加了新的接口history.pushState、history.replaceState讓咱們能夠向history歷史記錄中添加、替換記錄，從而實現了不刷新跳轉頁面。 在實際應用中一般會遇到這樣的需求，須要從一個目標頁跳到另外一個頁面就行一些操做，操做完成再跳到目標頁，若是這時候咱們還使用pushState跳轉到目標頁，就會向history中再添加一條目標頁的記錄

此時若是用戶在目標頁1中點擊返回上一頁按鈕就會又從新回到操做頁，但實際想要返回到的是起始頁，這時須要連續返回3次才能到回到起始頁。若是咱們在操做頁跳轉目標頁的時候使用返回上一頁history.go(-1)，這時只須要點擊1次返回鍵就能夠回到起始頁，這樣對於用戶體驗來講更合理一些。

若是操做頁數是2頁、3頁甚至更多，只要操做頁的頁數是固定的也只須要history.go(-N)就能夠了。麻煩一點的是操做頁數的數量是不固定的狀況，出於安全考慮咱們沒有辦法直接訪問history記錄中的具體信息，這時候就要結合history.length來實現返回到歷史記錄中的指定頁面。 history.length存儲的是歷史記錄中的頁數，包含當前頁面。頁面的跳轉、pushState操做都會使history.length + 1。

History.go(-1)或者點擊返回按鈕只會返回歷史記錄中的頁面並不會使history.length - 1。

當前頁不處在歷史記錄中最後一頁的時候跳轉頁面，會以當前頁面處在歷史記錄中的位置爲基礎添加記錄並覆蓋當前頁以後的頁面記錄

新的歷史記錄會變成下邊這樣

這樣就能夠利用history.lenght長度的變化來計算須要返回的頁數。在須要返回的目標頁跳轉操做的第一頁後將history.length存儲到storage中，而後操做完畢後在操做的最後一頁使用操做頁第一頁的 history.length - 操做頁最後一頁的history.length - 1，就獲得了須要返回的頁數

切記不要把目標頁的history.length 做爲起始頁來記錄，由於沒法保證目標頁處在歷史記錄的最後一頁