JS 原生 API 之 History

API 简介

属性	描述
length	会话历史中元素的数目，包括当前加载的页
state	返回一个表示历史堆栈顶部的状态值（pushState 的第一个参数）

方法	描述
back	前往上一页，可以点击浏览器左上角的返回按钮模拟此方法，等价于 history.go(-1)
forward	前往下一页，可以点击浏览器左上角的前进按钮模拟此方法，等价于 history.go(1)
go	前往浏览器历史记录的某一页，比如 go(1) 代表下一页，go(-1) 代表上一页
pushState	添加历史记录中的条目，浏览器 URL 会变化，但不会加载该页面
replaceState	修改历史记录中的条目，浏览器 URL 会变化，但不会加载该页面

示例

获取当前浏览历史堆栈顶部的状态值

let state = window.history.state

返回上一页

window.history.forward()

添加一条历史记录中的条目

// 参数一为状态对象，可用 state 获取
// 参数二为标题，目前 Firefox 忽略这个参数
// 参数三为需要添加的 URL
// 与 replaceState 的参数相同
window.history.pushState({ name: 'test' }, 'test page', 'test.html')

监听浏览历史堆栈的变化，前进或后退时会触发，添加和修改不触发

window.onpopstate = function (event) {
  console.log(event.state)
}