浏览器 API 之 — History API

History API 允许我们用 js 来操作和访问用户的会话历史记录。在前端路由系统中，History 被广泛使用（对于不支持 History 的老 ie，可以使用 hashchange 事件处理）。History API 都是一些简单好用的功能，没有复杂的功能，知识点也少，今天就来温习一下这组 API。

后退和前进

先来学习两个基本 api。

history.back() // 顾名思义，回退到前一个历史点。和浏览器中 回退 按钮一个效果
history.forward() // 顾名思义，前进到下一个历史点。和浏览器中 前进 按钮一个效果

如果要移动到指定的历史记录点，需要使用 go()方法。此方法需要传一个整数数字参数，表示相对当前记录点位置。如果是0，表示跳转到当前记录点，也就是刷新当前页面。同理有以下等效关系：

history.go(-1) // 和 history.back() 一个效果
history.go(1) // 和 history.forward() 一个效果

history.go() // 如果不指定参数，和 history.go(0) 一个效果

增加和修改历史记录

History 除了前面的基本用法外，还提供了更强大的功能，可以增加和修改历史记录，对应的方法分别是 pushState() 和 replaceState()。这两个方法都可以在改变页面 url 的情况下不刷新页面。同时通常这两个方法会配合 window 的 popstate 事件进行使用。当回退或者前进时，会触发 popstate 事件，在 popstate 事件中可以获取到在 pushState 和 replaceState 方法中传的对象参数。

看一下这两个方法的语法和基本使用方法：

// stateObj 为可序列化的任意对象
// title 用来改变页面的 title，但是大多数浏览器会忽略这个参数。
// url 即改变后的 url
history.pushState(stateObj, title[, url])
history.replaceState(stateObj, title[, url])

window.addEventListener('popstate', (e) => {
	console.log(e.state) // state 为 stateObj 对象序列化和反序列化操作后的值
})

对于 title 参数要被大多数浏览器忽略的原因，可以参考https://github.com/whatwg/html/issues/2174

依靠这两个方法，就可以简单实现一个单页面应用的前端路由系统。

整体梳理一下 History API

1. 属性

   在 history 对象中，有三个属性

   • length
     只读属性，表示历史记录堆栈的长度
   • state
     只读属性，通过 pushState 和 replaceState 进行设置，如果没设置，值为 null。通过此属性可不通过 popstate 事件来获取 state 的值。
   • scrollRestoration
     控制在历史导航中浏览器的滚动行为是否会被恢复。
     此属性可以设置两个值：auto 和 manual。auto 即 浏览器滚动行为会被恢复，manual 即为不会被恢复。
     例如：如果设置为 manual，则你在一个网页中滚动到了某一位置后，跳转到另一页面，再点击回退之后，回退到的页面不会滚动到你之前浏览的位置；但如果设置为 auto，页面则会滚动到之前位置。

2. 方法

   • back()
   • forward()
   • go()
   • pushState()
   • replaceState()

好的，History API 就这么多，内容很少，但很实用，简单有效。