Javaｓｃｒｉｐｔ不会刷新浏览器的前向后退功能。
最近，在学习骨干，学习了解主干首先需要了解spa。了解spa需要首先了解单页应用程序不刷新和更改URL的原因。随着不同的页面跳转相比，Ajax可以大大提高用户的浏览体验，而不需要看到页面之间的白色屏幕是一件令人愉快的事，但很多以前的AJAX应用程序不支持的浏览器的前进和后退，导致用户的网站浏览到哪里，一旦刷新会立即回到原来的位置，并且用户可以通过浏览器的后退按钮来实现切换浏览历史。
对于第一个问题，这个解决方案相当简单。只要饼干或localStorage用于应用程序的状态记录，你可以阅读状态时刷新页面，然后改变页面发送相应的请求。但另一个问题是很麻烦的，先说现代浏览器的解决方案。
HTML5解决方案
要了解HTML5是如何向前移动的，您必须首先了解历史对象和位置对象。
历史对象
历史对象的属性
1.length：返回浏览器历史记录列表URL的数量，以及用户访问的页面与一些1当前标签。由于隐私原因，URL的具体内容是不可见的。
2.state：与当前的URL关联的对象只能添加或pushstate和replacestate修改。我们可以用它来存储信息的URL。
历史对象的方法
1.history.back（）
此方法没有参数，它将返回到上一页，这相当于单击浏览器的后退按钮。
2.history.forward（）
此方法没有参数，它将返回到返回之前浏览的页面，这相当于单击浏览器的前向按钮。
3.history.go（数）
此方法接受整形变量参数。History.go（1）相当于背页。History.go（1）相当于前进一页，和history.go（0）将刷新当前页面。
4.history.pushstate（状态、标题、URL）
更改URL和不刷新页面的关键是它吗。这种方法会改变当前页面的location.href和修改当前history.state对象。执行后，history.length将增加1。这个方法接受三个参数，
1.state：当前URL相关的对象。
2.title：网页标题，但所有的浏览器忽略它，改变标题或使用document.title。
3.url：一个域作为当前页面相同的网站，和location.href将成为这个价值。
5.history.replacestate（状态、标题、URL）
这种方法是相同的，但它并不能改变history.length只能改为history.state和location.href。
注意，pushstate和replacestate第三参数非跨域和不触发浏览器的popstate事件和onhashchange事件（试验下，Chrome33）。
定位对象
除了单击前进后退按钮和历史事件之外，还可以使用位置方法更改URL并修改位置的属性。
位置对象的属性（读和写）：
1.host：域名+端口号
2.hostname：域名
3.port：端口号
4.protocol：协议
5.href：完整路径
6.origin：协议+域名+端口
7.hash：嗯，（#）网址（哈希）
8.pathname：文件路径+文件名
背后的内容9.search：（）
它可以实现无刷新的目的，通过改变location.href或location.hash。
定位对象的方法：
1.assign：改变URL的值增加了1的历史record.location.assig当前URL（# + x）将改变URL，但不刷新页面。
2.reload：刷新页面。
3.replace：改变URL的值，但history.length不改变使用的分配方法。
popstate事件
当URL变化，如用户单击前进/后退按钮，history.go（N）（N不等于0），location.hash = X（X不等于当前位置。哈希）会触发这个事件。它可以用来监测各种功能的URL。
复制代码代码如下所示：
window.onpopstate =函数（）{
/做某事
}
Onhashchange event
改变哈希值的popstate触发事件，和事件触发的popstate并不必然引发onhashchange事件。经过测试：
1.hash变化，但不变的onhashchange location.pathname触发事件，如history.pushstate（' # ABC）；
的2.hash和location.pathname变化不触发，如history.pushstate（一# ABC）；
旧的浏览器
旧的浏览器不支持pushstate和replacestate，因此不能听URL改变通过popstate（事实上，它不支持这种方法），它只能实现无刷新改变URL #后面的内容，但他们不支持onhashchange，所以URL的变化无动于衷（除了那页面将滚动到页面对应的ID的位置），那么只有祭出大招：投票，一个setInterval听这样的URL的值：
复制代码代码如下所示：
无功prevhash = window.location.hash；
var回调函数（）{…}
Window.setInterval（function（）{（）
如果（window.location.hash！= prevhash）{
prevhash = window.location.hash；
回调（prevhash）；
}
}，100）；
当然，这篇文章很令人沮丧。如果我们不考虑带有id的点击页面来改变哈希的情况，我们可以使用设计模式来优雅地实现监听器URL。然后监视URL更改（观察者）的所有类都订阅这个类。
复制代码代码如下所示：
更改类
函数的UrlChanger（）{
无功_this =这；
this.observers = { }；
观察者添加
this.addobserver =功能（obj）{…}
删除/观察员
this.deleteobserver =功能（obj）{…}
注意/观察者
这个_notifyobservers =函数（）{
VaR的长度= _this.observers.length；
console.log（长度）
对于（var i = 0；i <长度；i + +）{
_this。观察员{我}更新（）；
}
}
更改
this.changeurl =函数（Hash）{
window.location.hash =哈希；
_this _notifyobservers（）；
}
}
/听力课
功能oneofobservers（）{
无功_this =这；
this.update =函数（）{…}
}
实现
VaR O1 =新UrlChanger（）；
VaR O2 =新oneofobservers（）；
o1.addobserver（O2）；
o1.changeurl（'fun / / / arg1 arg2）；
某人已经做了某事。