操纵浏览器历史记录--popstate() && history.pushState()

1、历史记录前进与后退

1.后退：

window.history.back()--至关于用户在浏览器的工具栏上点击返回按钮；

2.前进：

window.history.forward()--至关于用户在浏览器的工具栏上点击前进按钮；

3.移动到指定历史记录点：

经过go()方法，指定一个相对于当前页面位置的数值，从当前会话的历史记录中加载页面（当前位置页面索引：0，上一页：-1，下一页：1）；

window.history.go(-2)--后退2页，至关于调用两次back();

window.history.go(1)--前进1页，至关于调用forward();

*能够经过window.history.length，获得历史记录栈中一共有多少页。

2、添加/修改历史记录条目

1.pushState(stateObject,title,URL):

逐条添加历史记录条目，

a.状态对象（stateObject）--一个JavaScript对象，与用pushState()方法建立的新历史记录条目关联。不管什么时候用户导航到新建立的状态，popstate事件都会被触发，而且事件对象的state属性都包含历史记录条目的状态对象的拷贝；（ps:FireFox浏览器强行限制状态对象的大小为640k，超出则抛异常，可经过sessionStorage或localStorage存储大的数据）

b.标题（title）--传入一个简短的标题，标明将要进入的状态；（FireFox浏览器目前会忽略该参数，可是传一个空字符串会比较安全）

c.地址（URL）--新的历史记录条目的地址（可选，不指定的话则为文档当前URL）；浏览器不会在调用pushState()方法后加载该地址；传入的URL与当前URL应该是同源的，不然，pushState()会抛出异常。

*某种意义上，调用pushState()有点相似于设置window.location='#foo'，它们都会在当前文档内建立和激活新的历史记录条目。

（拓展：window.location--待研究）

2.replaceState():

history.replaceState()操做相似于history.pushState()，不一样之处在于replaceState()方法会修改当前历史记录条目而并不是建立新的条目。

3.popstate():

每当激活的历史记录发生变化时，都会触发popstate事件。若是被激活的历史记录条目是由pushState所建立，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

读取当前状态：

若是页面中使用pushState()或replaceState()方法设置了一个状态对象，而后用户重启了浏览器。当页面从新加载时，页面会触发onload事件，但不会触发popstate事件。可使用history.state直接读取当前历史记录条目的状态，而不须要等待popstate事件。

调用history.pushState()或者history.replaceState()不会触发popstate事件.pushState事件只会在其余浏览器操做时触发, 好比点击后退按钮(或者在JavaScript中调用history.back()方法)。

调用方法:

window.onpopstate = function(event) {
   //作一些操做
   event.state; //  当前历史记录条目的状态 
};

　　　　或者：

window.addEventListener('popstate', function(event) {
  //作一些操做
});

（拓展：EventTarget.addEventListener() 方法将指定的事件监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。--EventTarget待研究）

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　--资料来源MDN