History对象

基本概念

history接口容许操做浏览器的曾经在标签页或者框架里访问的会话历史记录。

属性

• history.length
• history.state
• history.scrollRestoration

方法

• history.back()
• history.forward()
• history.go()
• history.pushState()
• history.replaceState()

history更多属性和方法，请参考MDN连接

history.pushState();

按指定的名称和URL将数据push进会话历史栈桥。
history.pushState()方法接收三个参数，依次为:

1. state: 一个与指定网址相关的状态对象，poststate事件触发时，该对象会传入回调函数。若是不须要这个对象，此处能够填null.
2. title: 新页面的标题，可是全部浏览器目前都会忽略这个值，所以这里能够填null.
3. 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

当前页面的state对象，即pushState()方法中第一个参数的值。

popstate事件

每当同一个文档的浏览历史出现变化时，就会触发popstate事件。
须要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮或前进按钮，或者使用JavaScript调用back,forward,go方法时才会触发。

使用的时候能够为popstate事件指定回调函数。

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

应用

咱们知道，Ajax能够实现页面无刷新操做。可是，也会形成另外的问题，即没法前进与后退。当执行Ajax操做的时候，往浏览器history中塞入一个地址（使用pushState）;因而，返回的时候，经过URL或其余传参，咱们就能够还原到Ajax以前的模样。