前端返回、前进方法总结（H5）

前端返回、前进方法总结（H5）

 

之前一个项目中，需要有多个不同的页面进入一个公共的页面，然后再从这个公共的页面返回到各自不同的页面，在此就用到了history.back(-1)和history.go(-1)，在刚开始的时候使用的是history.back(-1)，后来发觉没有预期的效果，返回后所有数据被清除了，然后找了资料了解到history.go(-1)的返回是不清数据的，然后果断换成history.go(-1)。

现在找了点资料，把这两个方法的用法整理一下，方便以后查看。

使用场景

返回一个页面方法有很多，就好比给返回按钮绑定一个URL，但是如果一个页面可以从很多页面到达，那么这个页面返回的页面就不是固定的，那么绑定固定的URL显然不妥。这个时候就需要一个返回前一页的操作了，就可以使用上述两个方法。

在我们提交表单、登录等操作的时候，在验证不通过的情况下，使用上述方法可以有效的减少用户的输入量。

两个方法的区别

history.back(-1)//直接返回当前页的上一页，数据全部消失，是个新页面

history.go(-1)//也是返回当前页的上一页，不过表单里的数据全部还在

总结

window.location.reload() //刷新

history.go(0) //刷新

window.history.go(1) //前进

window.history.go(-1) //后退

window.history.forward() //前进

window.history.back() 后退+刷新

 

注意：在手机端可能会出现点击无效果的现象，需要再加上return false，如下所示

<a href="#" onClick="javascript :history.go(-1);return false;"class="btn btn-primary">