单页应用巧用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 做为起始页来记录，由于没法保证目标页处在历史记录的最后一页