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

news2025/1/11 18:02:04

✨前言✨
  本篇文章主要在于了解及使用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 对象进行操作。



✨最后✨

总结不易,希望uu们不要吝啬你们的👍哟(^U^)ノ~YO!!
如有问题,欢迎评论区批评指正😁

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1349809.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【熔断限流组件resilience4j和hystrix】

文章目录 🔊博主介绍🥤本文内容起因resilience4j落地实现pom.xml依赖application.yml配置接口使用 hystrix 落地实现pom.xml依赖启动类上添加注解接口上使用 📢文章总结📥博主目标 🔊博主介绍 🌟我是廖志伟…

thinkphp6入门(14)-- 多关联模型查询

背景: 有3个数据表,一个User表,一个Cloth表,一个Shoe表。 Cloth表和Shoe表分别和User表通过user_id关联。 thinkphp 6中如何通过模型查询所有用户,其中包括每个用户的cloth和shoe。 多关联模型查询: 1.…

热塑性塑料激光透光率检测仪

热塑性塑料是一类在一定温度下具有可塑性,冷却后固化且能重复这种过程的塑料。它们通常由线型高分子化合物组成,这些分子在受热时不会发生交联。热塑性塑料可以通过回收和再加工,重新制成新的产品。根据其性能特点、用途广泛性和成型技术通用…

YOLOv8改进 | 2023主干篇 | FasterNeT跑起来的主干网络( 提高FPS和检测效率)

一、本文介绍 本文给大家带来的改进机制是FasterNet网络,将其用来替换我们的特征提取网络,其旨在提高计算速度而不牺牲准确性,特别是在视觉任务中。它通过一种称为部分卷积(PConv)的新技术来减少冗余计算和内存访问。…

漏洞复现-海康威视网络对讲广播系统远程命令执行漏洞(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复,敏感信息均已做打码处理,文章仅做经验分享用途,切勿当真,未授权的攻击属于非法行为!文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…

策略模式示例,Lambda表达式

这样会有很多代码冗余 以上代码使用策略模式优化 优化方案1 那么现在可以这样 优化方案二 原先定义了接口,还需要一个个写实现类,其实完全没必要,用匿名内部类方式就可以 优化方案三:用lambda方式简写 优化方案四:不需要定义接口 使用Stream API

JavaScript中alert、prompt 和 confirm区别及使用【通俗易懂】

✨前言✨   本篇文章主要在于,让我们看几个与用户交互的函数:alert,prompt 和confirm的使用及区别 🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍒博主将持续更新学习记录收获&…

【Shell编程练习】猜大小

系列文章目录 输出Hello World 通过位置变量创建 Linux 系统账户及密码 监控内存和磁盘容量,小于给定值时报警 系列文章目录脚本生成一个 100 以内的随机数,提示用户猜数字,根据用户的输入,提示用户猜对了,猜小了或猜大了&#x…

CMake入门教程【基础篇】CMake是什么?为什么学习CMake

文章目录 1.CMake简介2.为什么要学习CMake3.什么样的项目需要用CMake3.1大型或复杂项目3.2跨平台项目3.3需要高度定制化构建的项目3.4 研究和开源项目3.5小型或简单项目 4.CMake的作用5.支持的编译器5.1Windows平台5.2Unix/Linux平台5.3macOS平台5.4其他编译器5.5支持的平台 CM…

undefined reference to `pthread_create‘的另外一种解法

背景 编译带有thread的程序人,如果忘记-lpthread,那么就会报错 解决办法一:添加-lpthread 很简单添加-lpthread就行了 解决办法二:升级glibc 在高版本的glibc上,可能无需增加-lpthread Why glibc 2.34 removed li…

Web前端第9章思维导图

本章内容是关于CSS样式属性,包含CSS单位、CSS字体样式、CSS文本样式、CSS颜色与背景、CSS列表样式、CSS盒模型。重点在于CSS盒模型、CSS文本样式、CSS字体样式。 1. CSS单位 绝对单位 磅(pt),pica(pc)、c…

HarmonyOS官网案例解析——保存应用数据

介绍 本篇Codelab将介绍如何使用基础组件Slider,通过拖动滑块调节应用内字体大小。要求完成以下功能: 实现两个页面的UX:主页面和字体大小调节页面。拖动滑块改变字体大小系数,列表页和调节页面字体大小同步变化。往右拖动滑块字体…

React学习计划-React16--React基础(八)react-redux使用与优化,纯函数介绍

笔记gitee地址 学习了 redux,为什么还要讲react-redux呢? redux不是专门为react所创建的,只不过在某一刻,react和redux看对眼了,所以俩人走到了一起,所以为了更好的支持redux,react官方出了react-redux来更好的支持redux 1. react…

向日葵远程工具的使用和MySQL安装与网络配置

文章目录 一、向日葵远程工具的使用二、MySQL安装与配置2.1MySQL简介:2.2MySQL5.7安装步骤 一、向日葵远程工具的使用 远程登录:向日葵可以帮助用户远程登录到其他计算机,无论它们在世界的哪个角落。这对于需要远程访问其他计算机的用户来说非…

如何去查看服务器的物理地址

1.打开控制面板,点击网络和共享中心 2.点击 以太网 3.点击详情信息 4.查看物理地址

动态规划:解决复杂问题的魔法武器

目录 🐳今日良言:天会晴,心会暖 🐉一、什么是动态规划 🐉二、如何使用动态规划 🐉三、典型例题 🐳今日良言:天会晴,心会暖 🐉一、什么是动态规划 动态规…

如何通过使用说明书的优化降低售后支持成本?

随着市场竞争的加剧,售后服务已成为企业保持竞争优势的关键因素之一。而使用说明书作为产品的重要组成部分,与售后服务之间存在着密切的关系。接下来就探讨一下如何通过优化使用说明书降低售后支持成本,提升售后服务质量。 一、使用说明书对售…

Valheim英灵神殿2456-2457-2458端口TCP和UDP开通

Valheim英灵神殿游戏需要开启云服务器2456、2457和2458三个端口,端口的TCP和UDP协议均要开通,云服务器吧yunfuwuqiba.com分享来详细说下Valheim英灵神殿游戏服务器端口说明: Valheim英灵神殿服务器端口 Valheim英灵神殿游戏要使用云服务器的…

java SSM拖拉机售后管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM拖拉机售后管理系统是一套完善的web设计系统(系统采用SSM框架进行设计开发,springspringMVCmybatis),对理解JSP java编程开发语言有帮助,系统具有完整的源 代码和数据库,系统主要…

【前缀和】【分类讨论】【二分查找】2983:回文串重新排列查询

作者推荐 【动态规划】【字符串】C算法:正则表达式匹配 本文涉及的基础知识点 C算法:前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 二分查找算法合集 回文串重新排列查询 给你一个长度为 偶数 n ,下标从 0 开始的字符…