【JavaScript】history 对象

history 对象

history 提供与当前窗口的会话历史记录相关的 API。

常用属性

1. length：一个整数，表示会话历史的数目。
2. scrollRestoration：允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。
   1. auto：恢复到用户已滚动到的页面上的位置。
   2. manual：不恢复位置。
3. state：一个任意值，表示历史堆栈顶部的状态。这是一种不必等待 popstate 事件而查看状态的方式。

常用方法

1. history.back()：跳转到前一个页面。
2. history.forward()：跳转到后一个页面。
3. history.go(num)：往前/后跳 num 步；num 为正 → 往前跳、为负 → 往后跳、为 0 / 没有 → 刷新页面。
4. history.pushState(stateObj, title[, url])：向浏览器的会话历史栈增加一个条目。
5. history.replaceState(stateObj, title[, url])：修改当前历史记录实体。

pushState

history.pushState 方法会向浏览器的会话历史栈增加一个条目。

该方法是异步的。为 popstate 事件增加监听器，以确定导航何时完成。state 参数将在其中可用。

pushState(state, unused);
pushState(state, unused, url);

state 对象是一个 JS 对象，该对象与通过 pushState 创建的新历史条目相关联。每当用户导航到新的 state，都会触发 popstate 事件，并且该事件的 state 属性包含历史条目 state 对象的副本。

state 对象可以是任何能序列化的对象。因为 Firefox 将 state 对象保存到用户的磁盘上，以便用户重启浏览器可以恢复，我们对 state 对象序列化的表示施加了 16M 的限制。如果你传递的 state 对象的序列化表示超出了 pushState 可接受的大小，该方法将抛出异常。如果你需要更多的空间，建议使用 sessionStorage / localStorage。

unused：由于历史原因，该参数存在且不能忽略；传递一个空字符串是安全的，以防将来对该方法进行更改。

url：新历史条目的 URL。请注意，浏览器不会在调用 pushState 之后尝试加载该 URL，但是它可能会在以后尝试加载该 URL，例如，在用户重启浏览器之后。新 URL 可以不是绝对路径；如果它是相对的，它将相对于当前的 URL 进行解析。新的 URL 必须与当前 URL 同源；否则，pushState 将抛出异常。如果该参数没有指定，则将其设置为当前文档的 URL。

popstate

• 每当激活同一文档中不同的历史记录条目时，popstate 事件就会在对应的 window 对象上触发。
• 如果当前处于激活状态的历史记录条目是由 history.pushState() 方法创建的或者是由 history.replaceState() 方法修改的，则 popstate 事件的 state 属性包含了这个历史记录条目的 state 对象的一个拷贝。

注意：直接调用 history.pushState() / history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发，比如点击后退按钮（或者在 JS 中调用 history.back() 方法）。即在同一文档的两个历史记录条目之间导航会触发该事件。

不同浏览器在加载页面时处理 popstate 事件的形式不同。页面加载时 Chrome 和 Safari 会触发 popstate 事件，但 Firefox 不会。

封装 pushState

直接调用 pushState / replaceState 方法不会触发 popState 事件，如果想在调用 pushState / replaceState 时做些什么，可以对其进行封装。

const rawPushState = window.history.pushState;
window.history.pushState = function (...args) {
    console.log('pushState', args);
    rawPushState.apply(window.history, args);
};

const rawReplaceState = window.history.replaceState;
window.history.replaceState = function (...args) {
    console.log('replaceState', args);
    rawReplaceState.apply(window.history, args);
};