History API
History 接口允许操作浏览器的会话历史记录。
History API 的方法和属性
| 属性 | 是否只读 | 类型 | 作用 |
|---|---|---|---|
history.length |
只读 | 整数 | history 堆栈中会话的数量 |
history.state |
只读 | object | 返回一个表示历史堆栈顶部的状态的值 |
history.scrollRestoration |
否 | auto｜manual (string) | 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为 |
| 方法 | 作用 |
|---|---|
history.back() |
在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法. 等价于 history.go(-1) |
history.forward() |
在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法. 等价于 history.go(1) |
history.go() |
入参为整数，通过当前页面的相对位置从浏览器历史记录加载页面。 |
history.pushState(state, title[, url]) |
按指定的名称和URL（如果提供该参数）将数据 push 进会话历史栈，数据被 DOM 进行不透明处理；可以指定任何可以被序列化的 javascript 对象。 |
history.replaceState(state, title[, url]) |
按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。这个数据被 DOM 进行了不透明处理。你可以指定任何可以被序列化的 javascript 对象。 |
History API 用法
History API 最常见的用法是通过 pushState() 方法添加浏览器url历史（浏览器不会加载该 url ，甚至不会检查 url 是否真的存在），这样，在回退的时候就会加载 history 堆栈中的页面。在某种意义上，调用 pushState() 与 设置 window.location = "#foo" 类似，二者都会在当前页面创建并激活新的历史记录。但 pushState() 具有如下几条特点：
- 新的 URL 可以是与当前 URL 同源的任意 URL 。相反，只有在修改哈希时，设置
window.location才能是同一个 document。 - 如果你不想改 URL ，就不用改。相反，设置
window.location = "#foo";在当前哈希不是 #foo 时，才能创建新的历史记录项。 - 你可以将任意数据和新的历史记录项相关联。而基于哈希的方式，要把所有相关数据编码为短字符串。
- 如果 标题(title 随后还会被浏览器所用到，那么这个数据是可以被使用的（哈希则不是）。
pushState()不会触发 hashchange 事件，即使新的 URL 与旧的 URL 仅哈希不同也是如此
每当活动的历史记录项发生变化时， popstate 事件都会被传递给 window 对象。如果当前活动的历史记录项是被 pushState() 创建的，或者是由 replaceState() 改变的，那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。
参考： https://developer.mozilla.org/zh-CN/docs/Web/API/History
