history.pushState() 给网站添加和修改浏览历史记录

假设一个使用场景:html

后台管理系统项目,左右固定布局。左侧是通用布局,右侧页面是经过ajax切换的git

当咱们切换菜单后,想返回上一页,一般点击浏览器自带的回退。会发现回退的不是上一页,而是最开始打开这个项目的那一页。而且当咱们刷新当前页面。也会自动回退到最初始的页面github

缘由:咱们切换菜单的时候并无跳转页面,只是用过ajax把咱们想要的那也插在右侧DIV中。没有跳转页面就意味着浏览器没有存下历史记录。ajax

解决办法:浏览器

每次调用ajax的时候,而且调用成功,咱们都在内部加上这个  history.pushState()方法函数

history.pushState方法接受三个参数,依次为:布局

state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。若是不须要这个对象,此处能够填null。url

title:新页面的标题,可是全部浏览器目前都忽略这个值,所以这里能够填null。htm

url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。对象

假定当前网址是example.com/1.html,咱们使用pushState方法在浏览记录(history对象)中添加一个新记录。

var stateObj = { foo: 'bar' };

history.pushState(stateObj, 'page 2', '2.html');

这样地址栏就能够看到咱们本身存的标识了。历史记录也就存进去了

举个栗子:

https://1277502619.github.io/admin/index.html