JavaScript history 对象详解

前言：

在浏览网页时，用户通常不会特别关注前进和后退操作，但在前端开发中，理解页面跳转背后的机制至关重要。例如，浏览器如何保存页面信息？返回上一页时是否需要重新加载资源？要解答这些疑问，首先需要了解浏览器中 window 下的 history 对象。本文将对该对象的相关知识点进行详细总结。

history 对象记录了当前窗口自首次使用以来用户的导航历史记录。由于 history 是 window 的属性，因此每个 window 都拥有自己独立的 history 对象。出于安全考虑，该对象不会向脚本暴露用户访问过的具体 URL，但允许开发者在不知晓实际 URL 的情况下执行前进或后退操作。

1、路由导航

history.go() 方法允许在用户的导航历史记录中向任意方向进行导航，既支持前进也支持后退。该方法仅接收一个参数，该参数为整数，用于指定前进或后退的步数。

 history.go(-1);// 后退一页

history.go(1);// 前进一页

history.go(2);// 前进两页 //

go() 有两个简写方法： back() 和 forward() 。

history.back();// 后退一页

history.forward();//前进一页

history 对象还包含一个 length 属性，当 history.length == 1 时，表示这是用户窗口中的第一个页面。

调用 histroy 的 go 方法，以及 back 方法和 forword 方法，或者用户手动点击浏览器的前进/后退按钮，都会导致页面刷新后发生跳转。

2、历史状态管理API

（1）hashchange 事件

hashchange：history 对象的一个新特性是 hashchange，当页面 URL 的散列（hash）部分发生变化时，该事件会被触发，开发者可借此执行特定操作。当 URL 的片段标识符（即 # 符号及其后的部分）更改时，将触发 hashchange 事件。此外，历史状态管理 API 允许开发者修改浏览器 URL 而不重新加载页面。

例如，使用 pushState 和 replaceState 方法时，页面不会刷新，但路由地址会发生变化。

（2）popstate 事件

当活动历史记录条目发生更改时，将触发 popstate 事件。如果当前被激活的历史记录条目是通过调用 history.pushState（） 创建的，或者受到对 history.replaceState（） 调用的影响，则 popstate 事件的 state 属性包含该历史条目的状态对象副本。需要注意的是，直接调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。该事件仅在用户执行浏览器动作（如点击回退按钮）或在 Javascript 代码中调用 history.back() 或 history.forward() 方法时才会触发。

（3）history.pushState() 方法

pushState() 方法用于向当前浏览器会话的历史堆栈中添加一个新的状态（state）。该方法接收三个参数：一个 state 对象、新状态的标题以及一个可选的相对 URL。执行 pushState() 方法后，状态信息会被推入历史记录，浏览器地址栏也会更新以反映新的相对 URL。虽然 URL 栏显示新地址，但浏览器不会加载页面，甚至不检查页面是否存在，此操作会增加 history.length。

（4）history.replaceState()方法

　replaceState() 方法用于修改当前的历史记录实体。该方法同样接收三个参数：一个 state 对象、新状态的标题以及一个可选的相对 URL。执行 replaceState() 方法后，将更新当前的 state 对象或当前历史实体的 URL 以响应用户操作，URL 栏显示新地址，但不会加载页面，也不检查页面是否存在。此操作不会增加 history.length。

<body>
  <button onclick="handleNext()">点我到下一页</button><br>
  <button onclick="handleLast()">点我到上一页</button><br>
  <script>
    window.onload = function () {
      console.log(window.history);
    }
    window.addEventListener('hashchange', function () {
      console.log('The hash has changed!')
    }, false);
    window.addEventListener('popstate', (event) => {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    });
    function handleNext() {
      const state = { userId: "1234", page: "2" }
      const title = '二'
      const url = 'page2.html'
      window.history.pushState(state, title, url)
      console.log(window.history);
    }
    function handleLast() {
      const state = { userId: "1234", page: "21" }
      const title = '一'
      const url = 'page21.html'
      window.history.replaceState(state, title, url)
      console.log(window.history);
    }
  </script>
</body>

运行结果如下：

3、补充：URL的hash

URL 的 hash（即锚点 #）本质上是修改 window.location 的 href 属性。我们可以通过直接赋值 location.hash 来改变 href，且页面不会发生刷新。

如下图所示：

写在最后:

到此这篇关于 JavaScript history history 对象详解的文章就介绍到这了，更多相关 history 对象内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！