JavaScript history对象常用方法【通俗易懂】-编程知识

JavaScript history对象常用方法【通俗易懂】

✨前言✨
本篇文章主要在于了解及使用JavaScript中history对象常用方法

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

文章目录

一，什么是History对象
二，history 对象的属性和方法
三，代码示例
四，总结

一，什么是History对象

在JavaScript中，history是一个内置对象，它提供了与浏览器历史记录相关的方法和属性。它允许您在浏览器的历史记录中导航，以及在用户访问不同页面时进行页面的动态修改和管理。

history 对象来保存浏览器历史记录信息，也就是用户访问的页面。浏览器的前进与后退功能本质上就是 history 的操作。history 对象记录了用户浏览过的页面，通过该对象提供的 API 可以实现与浏览器前进/后退类似的导航功能。

二，history 对象的属性和方法

属性和方法	描述
length：	返回浏览历史记录的当前长度。
state：	返回当前页面的状态信息。
title：	返回当前页面的标题。
url：	返回当前页面的 URL。
back()：	返回到浏览历史记录中的上一个页面。
forward()：	跳转到浏览历史记录中的下一个页面。
replaceState()：	替换浏览历史记录中的当前页面。它需要三个参数：state，用于存储页面的状态信息；title，用于显示在浏览器的标签页上；url，表示页面的实际 URL。

三，代码示例

下面是一个简单的示例，演示如何使用 history 对象：

// 添加一个新的页面到浏览历史记录

history.pushState({}, "页面标题", "页面URL");

// 删除当前页面

history.back();

// 跳转到下一个页面

history.forward();

// 获取当前页面的状态信息

console.log(history.state);

// 获取当前页面的标题

console.log(history.title);

// 获取当前页面的 URL

console.log(history.url);

需要注意的是，history 对象只能在用户手动操作浏览器地址栏时生效。例如，通过 JavaScript 代码更改地址栏并不会触发 history 对象的改变。

四，总结

window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生-改变时，只会改变页面的路径，不会刷新页面。

History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。

由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。

浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。

✨最后✨