history详解

history 对象包含用户在浏览器中访问过的页面的URL，自带的属性和方法如下：

history.length
历史页面的URL数量，最小为1，最大为，即只能存50个历史页面记录。

history.back()、history.forward()、history.go()
分别表示跳转至上一个页面、下一个页面、指定的上下某个页面，history.go(-1) 等同于 history.back()，history.go(1) 等同于 history.forward()，history.go(0) 等同于当前页刷新，history.go(2) 回到上两个页面，以此类推。

这里需要注意的是，使用这三个方法进行页面跳转时，页面会从浏览器缓存之中加载，而不是重新加载，不触发onload方法，因此会保存原页面所有状态。

h5 为history 对象添加了两个新方法

history.pushState()
history.pushState(data, title, url) 方法需要传入三个参数，data 为一个键值对的对象，title通常可以忽略，传个null就好，url 为地址栏的值。

当执行了此方法，浏览器地址会立刻更改为当前传入的 url，但是并不会跳转，就算这个url值不存在，也不会报404错误，它只是成为了历史访问中的最新记录。所以，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化。

需要注意的是：

1. 如果pushState的url参数，设置了一个新的锚点值(即hash)，即新旧URL只在hash上有区别，并不会触发hashchange事件；
2. 如果设置一个跨域网址，会报错，这是防止恶意代码让用户以为他们是在另一个网站上。

history.replaceState 方法很少用，它的参数与 history.pushState() 方法的参数一样，不同的是 history.pushState() 方法会修改当前历史记录，而不是 push 一个新的。

history.state
这个属性存放着 history.pushState(data, title, url) 传进去的 data 值。

popstate事件
用 popstate 事件可以监听 history 对象的变化，不过只有用户手动点击浏览器的返回或前进按钮，或者调用 history.back()、history.forward()、history.go() 方法才会触发这个事件，history.pushState() 方法 或 history.replaceState() 并不会触发这个事件。

详细用法可看实际案例：路由（Router）原理极简说明。

---

一句话日记：时光不负