all

2023年06月08日

柏拉文

越努力，越幸运

history.back()

history.back() 方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。

语法

window.history.back()

history.forward()

history.forward() 在会话历史中向前移动一页。它与使用 delta 参数为 1 时调用 history.go(delta) 的效果相同。

语法

window.history.forward();

go()

history.go() 从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于 delta 参数的值。

语法

window.history.go(delta);

delta: 相对于当前页面你要去往历史页面的位置。负值表示向后移动，正值表示向前移动。因此，例如: history.go(2) 向前移动两页, history.go(-2) 则向后移动两页。如果未向该函数传参或 delta 相等于 0, 则该函数与调用 location.reload() 具有相同的效果。

场景

场景一: 刷新页面

window.history.go();
window.history.go(0);

// 或者 
location.reload();

history.pushState()

history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态state。

语法

history.pushState(state, title[, url])

state: 状态对象是一个 JavaScript 对象，它与 pushState() 创建的新历史记录条目相关联。每当用户导航到新状态时，都会触发 popstate 事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。
title: 当前大多数浏览器都忽略此参数，尽管将来可能会使用它。在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为要移动的状态传递简短的标题。
url: 新历史记录条目的 URL 由此参数指定。请注意，浏览器不会在调用 pushState() 之后尝试加载此 URL，但可能会稍后尝试加载 URL，例如在用户重新启动浏览器之后。新的 URL 不必是绝对的。如果是相对的，则相对于当前 URL 进行解析。新网址必须与当前网址相同 origin; 否则, pushState() 将引发异常。如果未指定此参数，则将其设置为文档的当前 URL。

场景

场景一: 实现 VueRouter.push

window.history.pushState(
    {
        back: null,
        current: currentUrl,
        forward:targetUrl,
        position: window.history.length,
        replaced: true,
        scroll: null,
    },
    '',
    targetUrl
);

history.replaceState()

history.replaceState() 方法使用 state objects, title 和 URL 作为参数，修改当前历史记录实体，如果你想更新当前的 state 对象或者当前历史实体的 URL 来响应用户的的动作的话这个方法将会非常有用。

语法

history.replaceState(stateObj, title[, url]);

stateObj: 状态对象是一个 JavaScript 对象，它与传递给 replaceState 方法的历史记录实体相关联。
title: 大部分浏览器忽略这个参数, 将来可能有用。在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为该状态传递简短标题
url: 历史记录实体的 URL. 新的 URL 跟当前的 URL 必须是同源; 否则 replaceState 抛出一个异常。

history.back()​

history.forward()​

go()​

history.pushState()​

history.replaceState()​

history.back()

history.forward()

go()

history.pushState()

history.replaceState()