History接口允许操作浏览器的历史会话记录,可以实现无刷新更改地址栏链接，配合 AJAX 可以做到无刷新跳转。浏览器历史记录可以看作一个「栈」
属性:
History.length: 只读,会话历史记录的个数.新开的tab页length值为1
History.scrollRestoration : auto/manual.
auto: 浏览器刷新后自动滚动到刷新前的位置
manual: 浏览器刷新后呈现在document的最顶端
History.state: 只读,历史记录栈顶的值
方法:
History.back() =>History.go(-1)
History.forward() =>History.go(1)
History.go()
History.pushState(state: Object | String, title: String, url: String)
往浏览器的历史记录中添加一条新记录，同时改变地址栏的地址内容
state: 描述信息, 可以是能被序列化的任何东西. 状态对象在序列化表示后有640k的大小限制.( 能被序列化的包括基础数据类型和Json)
title: 新页面的标题,被浏览器忽略
url: 地址栏地址. 如果以http或者https开头,那么整个地址栏被替换. 否则默认是相对路径.当地址不同源时,会有警告
History.replaceState(state: Object, title: String, url: String)
更新history栈顶的数据
window.onpopstate=function(event){//event.state}
当点击浏览器前进/后退按钮和调用foward()和back()事件时,会被触发
应用场景:
1.History接口被广大路由工具使用,比如vue-router的history模式
2.假如一个项目没有使用路由插件,左侧是导航,右侧是内容.点击左侧导航,整个页面不重新加载,只更新右侧内容,右侧内容使用Ajax加载.那么点击浏览器的前进后退按钮则无法按预期前进后退.
此时可以使用history.
点击导航链接,禁止默认行为(跳转),通过history.pushState()把导航对应的地址放入历史记录
前进后退时,监听popstate事件,读取event.state,根据state的信息使用ajax重新加载内容.
延伸:
pushState与window.location的异同
同: 当前页面创建并激活新的历史记录
异:
1.刷新:
pushState:只要同源,就不刷新
window.location: 只有更新hash值,才不刷新
2.记录数据:
pushState:可以记录任意数据
window.location: 将数据编码成短字符串
3.hashchange事件
pushState:绝对不会触发hashchange事件
window.location: hash值改变时会触发