浏览器 HistoryAPI 使用学习笔记

history api 可以编程式的控制页面在历史记录中间进行跳转，并且可以修改历史记录

1. history.back()

• 跳转到当前url之前的url

2. history.forward()

• 前进一步。如果发生过后退操作，那么它会回到后退前的url；
• 如果当前页面是最新的，那么不进行任何操作

3. history.go(n)

• 可以前进或者后退任意的步数，负数表示后退，正数表示前进，0表示刷新当前页面

4. history.pushState{{ data:"123" }, "标题", "路径"};

• 在当前历史记录里新增一条，但页面不会发生实际跳转，适合单页应用根据url切换不同的组件；
• 接收三个参数：历史转态对象、站点标题、和要添加的url路径（前两个参数是可选的，并且第二个参数暂时不能生效）；
• 在历史记录里新增一条记录之后，如果之后再发生了一次跳转，那么在后退的时候会后退到新增的url记录上；
• 当前url的状态对象可以通过 history.state 来访问；
• 如果要在前进或者后退的时候访问历史记录状态对象，可以监听 windows 的 onpopstate 事件；
• 

5. history.replaceState{{ data:"123" }, "标题", "路径"};

• 和history.pushState类似，只不过他是替换历史记录最新的一条而不是添加一条；
• 它接收的参数和pushState一样；
• 如果在当前页面A调用pushState追加一条新的记录，后又调用replaceState更改了url，那么当再跳转到一个新的url之后，再点击后退就会跳转到replaceState中指定的记录，再后退就会回到一开始的url(页面A)，pushState中的记录就没有了；

6. history对象中还有一个scrollRestoration属性

• 如果值是 "auto" 的话，那么在后退或者前进的时候会恢复页面上一次滚动的位置；
• 如果设置为 "manual"，滚动位置就不会再恢复了，可以自己定义滚动恢复的逻辑