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之前的模样。