关于JavaScript history 对象详解

灰太狼 2024-03-23 18:58 48阅读 0赞

本文主要介绍了JavaScript history 对象详解，history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性，所以每个 window 都有自己的 history 对象，更多详细内容请参考下面文章内容

![8bc13bb649edd3dfdb172c22c5278a75.jpeg][]

**前言：**

我们浏览一个网页时可能不太会注意网页前进后退这些操作，但是在开发时你是否想过页面之间的跳转经历了什么，浏览器时怎么保存的页面信息，重新返回上一个页面的时候是否需要重新加载页面呢，会有很对疑问，要想解决这些问题，首先需要知道浏览器中的`window`下的`history`对象，本文来详细总结一下该对象的相关知识点。

`history`对象表示当前窗口首次使用以来用户的导航历史记录。因为 `history`是 `window`的属性，所以每个 `window`都有自己的 `history`对象。出于安全考虑，这个对象不会暴露用户访问过的 URL，但可以通过它在不知道实际 URL 的情况下前进和后退。

### 1、路由导航 ###

`history.go()` 方法可以在用户历史记录中沿任何方向导航，可以前进也可以后退。这个方法只接收一个参数，这个参数可以是一个整数，表示前进或后退多少步。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>history.go(-1);</code><code>// 后退一页</code> <code>history.go(1);</code><code>// 前进一页</code> <code>history.go(2);</code><code>// 前进两页 //</code> <code>go() 有两个简写方法： back() 和 forward() 。</code> <code>history.back();</code><code>// 后退一页</code> <code>history.forward();</code><code>//前进一页</code> </td> 
 </tr> 
 </tbody> 
</table>

`history`对象还有一个 `length`属性，`history.length == 1`表示这是用户窗口中的第一个页面

`histroy`的go方法，`back`方法、`forword`方法以及用户在浏览器手动的前进后退按钮都会导致页面刷新后跳转。

### 2、历史状态管理API ###

#### （1）hashchange 事件 ####

`hashchange：history` 对象的一个新特性是`hashchange`，会在页面 URL 的散列变化时被触发，开发者可以在此时执行某些操作。当URL的片段标识符更改时，将触发`hashchange`事件 (跟在＃符号后面的URL部分，包括＃符号)。而状态管理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）。这个方法接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL。`pushState()`方法执行后，状态信息就会被推到历史记录中，浏览器地址栏也会改变以反映新的相对 URL。URL栏显示新地址, 但是不会加载 页面，甚至不会检查页面是否存在，该方法会增加`history.length`

#### （4）history.replaceState()方法 ####

`　replaceState()`方法修改当前历史记录实体。这个方法接收 3 个参数：一个 `state`对象、一个新状态的标题和一个（可选的）相对 URL。`r``eplaceState()`方法执行后，将会更新当前的`state`对象或者当前历史实体的URL来响应用户的的动作,URL栏显示新地址, 但是不会加载 页面，甚至不会检查页面是否存在。该方法不会增加`history.length`。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 </td> 
 <td> <code>&lt;body&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;button onclick=</code><code>"handleNext()"</code><code>&gt;点我到下一页&lt;/button&gt;&lt;br&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;button onclick=</code><code>"handleLast()"</code><code>&gt;点我到上一页&lt;/button&gt;&lt;br&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onload = </code><code>function</code> <code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(window.history);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.addEventListener(</code><code>'hashchange'</code><code>, </code><code>function</code> <code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'The hash has changed!'</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}, </code><code>false</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.addEventListener(</code><code>'popstate'</code><code>, (event) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"location: "</code> <code>+ document.location + </code><code>", state: "</code> <code>+ JSON.stringify(event.state));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>handleNext() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const state = { userId: </code><code>"1234"</code><code>, page: </code><code>"2"</code> <code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const title = </code><code>'二'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const url = </code><code>'page2.html'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.history.pushState(state, title, url)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(window.history);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>handleLast() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const state = { userId: </code><code>"1234"</code><code>, page: </code><code>"21"</code> <code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const title = </code><code>'一'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const url = </code><code>'page21.html'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.history.replaceState(state, title, url)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(window.history);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>&lt;/script&gt;</code> <code>&lt;/body&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**运行结果如下：**

![00ccc179c24cb797798c0c5c03ecd5be.gif][]

### 3、补充：URL的hash ###

URL的`hash`也就是锚点(\#), 本质上是改变`window.location`的`href`属性，我们可以通过直接赋值`location.hash`来改变href, 但是页面不发生刷新,

**如下图所示：**

![3ec078e77e4edd1de4da4c8a53005492.gif][]

**结语:**

到此这篇关于J`avaScript history` 对象详解的文章就介绍到这了,希望可以帮到你

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

[8bc13bb649edd3dfdb172c22c5278a75.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/be38e75e256c43988bcb116e04510ec4.png
[00ccc179c24cb797798c0c5c03ecd5be.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6a628bffe7de4256b107e3cb55d1013f.png
[3ec078e77e4edd1de4da4c8a53005492.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3adb2bd9cf5740718a2506fbc89766f4.png
[Link 1]: https://www.weidianyuedu.com