Javascript History API 的工作原理

Posted on by

在前端 Javascript 中，我们可以很容易地从当前位置访问用户的网络历史记录。这意味着我们可以使用函数让用户仅使用 Javascript 来回移动。

如何为用户导航#

我们有一些函数可以用来强制用户导航到特定页面。它们都可以通过访问window.history。

后退和前进

back()我们可以分别使用和forward()函数使用户的浏览器后退或前进。因此，如果我们希望用户的浏览器返回导航，我们会写：

window.history.back();

同样，我们可以这样前进：

window.history.forward();

我们也可以通过简单地使用 go 前进和后退一定数量。下面我们有两个例子，一个后退 5 页，另一个前进 3 页：

// Go back 5 pages
window.history.go(-5);
// Go forward 3 pages
window.history.go(3);

运行这些函数将强制刷新页面。如果我们不想刷新页面，我们必须使用其他功能。

推动和取代历史#

如果我们想避免页面刷新，我们可以使用 将新的历史条目推送到用户的浏览器pushState，或者使用 将当前历史条目替换为另一个replaceState。唯一的区别是，使用pushState，用户可以返回，而使用replaceState，用户不能。

两者都需要 3 个输入：

  • State – 作为数据传递给新页面的对象。
  • The Title – 这个新历史状态的新标题。
  • URL（可选） – 要转到的 URL，它必须具有相同的来源。

一个例子如下所示：

window.history.pushState({}, "New Page Title", "/somePage");

注意：通过推送或替换来更改页面状态不会导航到您提供的 URL。它只是更新浏览器中的标题和 URL – 同时传递状态数据。如果我们想在不刷新的情况下导航，则需要做更多的工作。

访问状态对象

您会注意到我们将上面的一个对象传递给了新的历史条目。要访问该数据，我们需要使用popstate事件。当历史发生变化时，这个事件就会触发。例如：

window.history.pushState({ someData : "someValue" }, "New Page Title", "/somePage");
window.addEventListener('popstate', function (e) {
    // To get the object { someData : "someValue" } when the history changes
    // we can use e.state
    console.log(e.state);
});

注意：一个主要的混淆点是popstate不会通过简单地调用pushState或replaceState来触发。历史条目将包含状态数据，但它只会在用户单击后退或前进时触发。因此我们不能使用popstate来跟踪pushState/replaceState。

结论#

Web History API为我们提供了很多操作历史的自由。fetch通过使用API 获取下一页的内容，我们甚至可以实现用户在单击链接时不再需要刷新页面的地方。

因此，Web History API 是任何人的 Javascript 知识的重要组成部分。

推荐阅读：