基本概念历史界面允许操作浏览器在选项卡或框架中访问过的会话历史。属性history.lengthhistory.statehistory.scrollRestorationMethodhistory.back()history.forward()history.go()history.pushState()history.replaceState()history的更多属性和方法，请参考MDN链接history.pushState();通过指定的名称和URL将数据推送到会话历史栈桥中。history.pushState()方法接收三个参数，分别是：state：与指定URL相关的状态对象。当poststate事件被触发时，该对象将被传递给回调函数。如果不需要这个对象，可以填null.title：新页面的标题，但是目前所有浏览器都会忽略这个值，所以可以填null.url：新的URL，必须在与当前页面相同的域。您浏览器的地址栏将显示此URL。注意参数中的url必须和当前页面在同一个域下，否则会报错。比如我在当前的index.html中使用了这个方法，url参数为“https://www.baidu.com”。将出现以下错误消息。调用pushState后，浏览器地址栏会发生相应变化，但页面不会刷新，只是在路由栈中添加一条记录。然后点击浏览器的前进后退箭头，地址栏会发生变化，页面不会刷新。但是如果你在当前浏览器的地址栏重新输入一个地址，然后返回，地址会刷新一次。举例如下：当前页面为page1.html，调用pushState(null,null,'page2.html')方法后，页面地址变为page2.html。但是页面显示的内容还是page1.html的内容。这时，把浏览器地址栏里的参数删掉，改成'https://www.baidu.com'回车访问，到百度页面时，再点击浏览器后退箭头，page2.html将显示页面内容。当然，上述在地址栏中重新输入地址的操作可以改为任何可以刷新当前页面的操作。例如window.location.href或window.location.reload()等history.replaceState()history.replaceState()方法的参数与pushState()方法完全一样，不同的是它修改浏览历史中的当前记录。history.state当前页面的状态对象，即pushState()方法中第一个参数的值。popstate事件popstate事件在同一文档的浏览历史发生变化时被触发。需要注意的是，仅仅调用pushState方法或replaceState方法不会触发该事件，只有当用户点击浏览器后退按钮或前进按钮，或者使用JavaScript调用后退、前进、前进时才会触发方法。使用时，可以为popstate事件指定一个回调函数。window.addEventListener('popstate',function(event){console.log('location:'+document.location);console.log('state:'+JSON.stringify(event.state));});apply我们知道Ajax可以实现无页面刷新操作。但是，这也会导致另一个问题，那就是无法前进和后退。在执行Ajax操作时，向浏览器历史记录中插入一个地址（使用pushState）；所以，在返回的时候，我们可以通过URL或者其他参数来恢复Ajax之前的样子。
