history对象

history

window.history 对象是HTML5提供的用于维护当前标签页浏览历史的对象。主要功能是前进后退和在不刷新页面的情况下，修改地址栏里的URL地址。

属性

常用的属性只有 history.length， 表示当前标签页浏览历史的长度，初始值是 1。对history.length赋值并不会起作用，也没有任何反应。

方法

前进后退

1. history.back() 后退到上一个页面。当前已经是第一个页面时，调用此函数不会有任何反应。
2. history.forward() 进入历史的下一个页面。当前已经是最后一个页面时，调用此函数不会有任何反应。
3. history.go(step) step为正前进step个页面，step为负后退step和页面，超过页面历史范围的调用不会有任何反应。

修改历史（地址栏的URL）

1. history.pushState(state, title, url) 不刷新页面并添加一条历史记录，title表示下个页面的标题（貌似目前所有浏览器都忽略state和title）；url表示新的地址。
2. history.replaceState(state, title, url) 替换当前地址栏里的url，state和title会被所有浏览器忽略。

相关事件

1. popstate，前进或者后退时会触发。pushState 和 replaceState 不会触发此事件。
2. hashchange，当前页面的hash值发生变化时触发。

应用

1. 改变浏览历史，不让用户回退到某个页面。
2. 前端路由。 常用的前端路由是通过hash实现的，history提供了操作历史的api后，就可以通过history来实现了。

附

URL各部分的含义：
https://www.baidu.com/search?word=abc&time=12345#/article/item?title=hello
host: www.baidu.com
origin: https://www.baidu.com
pathname: /search
search: ?word=abc&time=12345
hash: #/article/item?title=hello

向服务器发起请求的时候 hash 部分不会被发送出去，因此需要传递给服务器的query参数必须放到hash前面。而hash后面的参数一般在前端路由时被读取和处理。

转载于:https://juejin.im/post/5c03f302e51d45489f05b03a