「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」
前言
history 位于全局对象window中，它提供了对浏览器会话历史的访问，通过它暴露的一些方法，可以允许你在用户浏览历史中向前和向后跳转，目前的单页面应用的路由都是基于history对象暴露的方法而实现。
length 属性
通过 window.history.length 可以返回历史列表中的网址数，但是千万不要使用这个属性来确定是否还能继续回退，因为它只表示你看过了多少个页面。
scrollRestoration
History.scrollRestoration 叫做滚动恢复属性 它允许web应用程序在历史导航上显式地设置默认滚动恢复行为，它有两个值
- auto：将恢复用户已滚动到的页面上的位置。
- manual：未还原页上的位置。用户必须手动滚动到该位置。
利用它可以防止自动恢复页面位置
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
使用
通过back()方法，在history中向后跳转，这和用户点击浏览器回退按钮的效果相同。
window.history.back();
类似的，我们可以通过forward()方法，在history中向前跳转，这和用户点击浏览器前进按钮的效果相同。
window.history.forward();
我们还可以可以用 go() 方法来跳转到会话历史中的某一特定页面，通过与当前页面相对位置来标志，比如前一个页面就传-1后一个页面就传1
修改历史记录
HTML5 引入了history.pushState()和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。
pushState
pushState() 需要三个参数: 一个状态对象, 一个标题, 和 一个URL。
window.onpopstate = function(e) {
alert('state 改变');
}
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");
着会使url路径变成 bar.html，但是不会重新加载页面。如果现在用户在bar.html点击了返回按钮，将会执行alert('state 改变')。
replaceState
history.replaceState(stateObj, title[, url])
参数
- stateObj 状态对象是一个JavaScript对象，它与传递给
replaceState方法的历史记录实体相关联. - title 为该状态传递简短标题
- url 可选 历史记录实体的URL。新的URL跟当前的URL必须是同源；否则 replaceState 抛出一个异常。
history.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
他们最大的特点是添加或替换历史记录后，浏览器地址栏会变成你传的地址，而页面并不会重新载入或跳转。
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");
