history 属性提供了操作浏览器会话历史的接口。

5-1.属性

5-1-1.length

length 属性表示当前窗口一共访问过的网址数量。

window.history.length

5-1-2.state

state 属性与 pushState 或者 replaceState 中声明的参数相关联。并不是网址中的 queryString。

默认值是 null。

window.history.state

5-2.方法

history 上的方法分为两类。

一类是用来触发浏览器的前进后退操作：

1. back()
2. forward()
3. go()

另一类是添加或修改浏览器历史记录条目：

1. pushState()
2. replaceState()

5-2-1.back()

相当于点击一次浏览器后退按钮：

window.history.back()

如果当前页面无可后退页面，则上述代码调用后，不会起作用。

5-2-2.forward()

相当于点击一次浏览器前进按钮：

window.history.forward()

如果当前页面无可前进页面，则上述代码调用后，不会起作用。

5-2-3.go()

该方法可手动指定后退或者前进几个页面。

相当于 back:

window.history.go(-1)

相当于 forward:

window.history.go(1)

5-2-4.pushState()

pushState 可以用来在浏览器历史记录中添加条目。

window.history.pushState(state, title, url)

有三个参数：

1. state: 它会与新条目绑定在一起，可以用来存储一些简单的数据，不过不能存太多，firefox 对它的限制是 640K，这个对象可以通过popstate 事件对象的 state 属性或者 window.history.state 来访问。
2. title: 目前浏览器都是忽略它的，在使用的时候一般传入 null 即可。
3. url: 新条目的地址。如果没有，默认就是当前文档的地址。可以是相对地址或者绝对地址。

TIP

上述的相对地址，会相对于当前文档。

而绝对地址必须是同源地址，即绝对地址与当前文档地址是同源的，不能是跨域。否则会报错：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL cannot be created in a document with origin and URL.

pushState 具有以下特点：

1. 更改当前 URL，但浏览器页面不会跳转，不会刷新。
2. 会影响浏览器历史记录。

可以这样理解，pushState 与 replaceState 是浏览器暴露给开发者用来操作浏览器历史记录的接口。

开发者可以利用这俩接口来模拟实现自己想要的路由切换功能。

5-2-5.replaceState()

replaceState 方法与 pushState 方法大同小异。

只有一点不同：

1. pushState 是在当前历史记录的基础上添加一条新的历史记录。
2. replaceState 则是以一条新的历史记录替换当前历史记录。

5-3.popstate事件

pushState 与 replaceState 的调用，不会触发 popstate 事件。

只有用户手动点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用back()、forward()、go()方法时才会触发 popstate。

window.addEventListener('popstate', (e) => {
   console.log(e)
 })

TIP

页面第一次加载的时候，浏览器不会触发 popstate 事件，但可以正常访问 history.state。

5-4.hashchange事件

触发 hashchange 只有以下几种情况：

1. 直接更改浏览器地址，在最后面增加或改变 #hash；
2. 通过改变 location.href 或 location.hash 的值；
3. 通过触发点击带锚点的链接；
4. 浏览器前进后退可能导致 hash 的变化，前提是两个网页地址中的 hash 值不同。

TIP

需要注意的是 pushState 与 replaceState 并不会触发 hashchange 事件。

pushState与hashchange