有关history对象知识点的简单整理

资料参考：MDN

从HTML5开始，可以对history栈中的内容进行操作。

1. 在history中跳转

使用back()，forward()，go()方法来完成用户在历史记录中的前进和后退。

1.1 向前和向后跳转

向后跳转：

window.history.back()

跟用户点击后退按钮的效果是一致的。
试一下：
打开下面这个网址：w3school
点击页面中的某个链接，比如“开始学习JavaScript”这个链接。会发现页面进行了跳转。
打开控制面板，在console中输入window.history.back()。会发现页面回退到了未点击链接之前的页面。
接着再输入window.history.forward()，会发现页面又跳了回去。

1.2 跳转到history中指定的一个点

可以用go()进行会话历史指定位置的跳转。通过与当前页面的相对位置来标志。当前页面的标记为0；
向前移动一个页面：

window.history.go(1)

向后移动一个页面：

window.history.go(-1)

向后移动两个页面：

window.history.go(-2)

2. 添加和修改历史记录中的内容

使用history.pushState()和history.replaceState()方法，可以添加和修改历史记录中的内容。

2.1 pushState()

pushState()方法需要三个参数：状态对象、标题、URL。

2.1.1 状态对象

状态对象state是一个js对象，通过pushState()创建新的历史记录条目。无论什么时候用户导航到新的状态，popState事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。

2.1.2 标题

火狐浏览器目前忽略这个参数，可以传递一个空字符串。

2.1.3 URL

该参数定义了新的历史记录URL。新的URL不必为绝对路径。如果新的URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源。

2.2 replaceState()

history.replaceState()和history.pushState()很相似。
区别在于replaceState()是修改当前的历史记录而不是新建一个。

2.3 popState事件

每当活动的历史记录发生变化时，popState事件都会被传递给window对象。
如果当前活动的历史记录项是被pushState创建的，或者是被replaceState改变的，那么popstate事件的状态属性state会包含一个当前历史记录状态对象的拷贝。

---

完。