JavaScript的跳转传参方式

在JavaScript中,页面跳转并传递参数通常可以通过几种不同的方式来实现。下面是一些常见的方法:

1.URL参数(Query String)

这是最常见的方式,通过在URL的末尾添加参数来实现。例如:

javascriptwindow.location.href = 'target.html?param1=value1&param2=value2';

target.html页面中,你可以使用window.location.search来获取查询字符串,并使用URLSearchParams对象解析参数:

javascriptconst params = new URLSearchParams(window.location.search);
const param1 = params.get('param1');
const param2 = params.get('param2');

2.HTML5 History API

HTML5引入了history.pushState()history.replaceState()方法,它们允许你修改浏览器的历史记录而不重新加载页面。你可以使用这些方法与自定义数据一起操作历史记录。

例如,使用pushState添加一个新的历史记录条目:

javascripthistory.pushState({param1: 'value1', param2: 'value2'}, 'Title', 'target.html');

然后,你可以监听popstate事件来捕获历史记录更改,并从事件对象中获取数据:

javascriptwindow.addEventListener('popstate', function(event) {
console.log(event.state.param1); // 'value1'
console.log(event.state.param2); // 'value2'
});

3.使用localStorage或sessionStorage

虽然这不是直接的跳转传参方式,但你可以使用Web Storage API(如localStoragesessionStorage)在页面之间共享数据。

在设置目标URL之前,将数据存储在localStoragesessionStorage中:

javascriptlocalStorage.setItem('param1', 'value1');
localStorage.setItem('param2', 'value2');

然后在目标页面中检索这些数据:

javascriptconst param1 = localStorage.getItem('param1');
const param2 = localStorage.getItem('param2');

请注意,使用localStorage存储的数据将在用户的浏览器会话之间持久化,而sessionStorage中的数据则仅在当前浏览器窗口或标签页的生命周期内可用。

4.使用Cookie

另一种在页面之间传递数据的方法是使用Cookie。你可以在跳转之前设置一个Cookie,然后在目标页面中读取它。但是,请注意Cookie有一些限制,比如大小限制和跨域问题。

设置Cookie:

javascriptdocument.cookie = "param1=value1; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
document.cookie = "param2=value2; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

读取Cookie:

javascriptfunction getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}const param1 = getCookie('param1');
const param2 = getCookie('param2');

每种方法都有其优缺点,具体取决于你的用例和需求。例如,URL参数对于简单的键值对传递很方便,但可能不适合传递大量数据或敏感信息。而Web Storage API和Cookie则提供了更持久和灵活的存储选项,但也可能受到浏览器限制或安全问题的影响。

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

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

相关文章

gitlab webhook触发jenkins任务

配置jenkins 安装gitlab插件 配置jenkins job 选择gitlab webhook触发 在高级中生成token 代码仓设置 新增webhook 配置webhook 测试连接 缺点,不能带gitLab事件的参数!!!

Spark RDD案例:统计网站每月访问量

这个项目利用Spark技术,通过统计网站访问记录中的日期信息,实现了对每月访问量的统计和排序。通过分析数据,我们可以了解到不同月份的网站访问情况,为进一步优化网站内容和推广策略提供数据支持。 使用Spark统计网站每月访问量 …

Apache2.4和PHP8的量子纠缠

Apache不建议你用,PHP建议使用

一种基于电场连续性的高压MOSFET紧凑模型,用于精确表征电容特性

来源:A Compact Model of High-Voltage MOSFET Based on Electric Field Continuity for Accurate Characterization of Capacitance(TED 24年) 摘要 本文提出了一种新的高压MOSFET(HV MOS)紧凑模型,以消…

P5732 杨辉三角

题目描述 给出 𝑛(𝑛≤20)n(n≤20),输出杨辉三角的前 𝑛n 行。 如果你不知道什么是杨辉三角,可以观察样例找找规律。 输入格式 无 输出格式 无 输入输出样例 输入 #1复制 6 输出 #1复制 1 1 1 1 2 1 1 3 3 …

408学习笔记-数据结构-2-线性表

线性表 1、逻辑结构 1、数据结构只有一种逻辑结构,而可以有两种存储结构,有多种抽象运算。 2、线性表是一种逻辑结构,属于总线性结构——线性结构的一种,同属于线性结构的逻辑结构还有:栈、队列和数组。 3、线性表定…

【经典文献】水下光学和声学成像:融合的时代?最新技术概述

文献名称:《Underwater Optical and Acoustic Imaging: A Time for Fusion? A Brief Overview of the State-of-the-Art》作者列表:Fausto Ferreira, Diogo Machado, Gabriele Ferri, Samantha Dugelay and John Potter作者单位:北约科学技术…

【hana】hana1.0多容器常用命令

基础命令 数据库 连接数据库 hdbsql -u system -p {passwd} -i 02 -d {dbname}查询所有数据库 SELECT DATABASE_NAME, ACTIVE_STATUS FROM M_DATABASES;停止数据库,会修改数据库状态为No ALTER SYSTEM STOP DATABASE testdb; 启动数据库,会修改数据…

多线程的代码案例

目录 单例模式 饿汉模式 懒汉模式 阻塞队列 生产者消费者模型意义: 阻塞队列使用方法 实现阻塞队列 阻塞队列实现生产者消费者模型 定时器 实现简单的定时器 工厂模式 线程池 为啥呢? 从池子里面取 比 创建线程 效率更高 线程池的创建 怎么填坑 ThreadPoolExec…

多年后,再探算法和数据结构

多年来,通过深入学习和实践各种编程语言,我对数据结构和算法在程序设计中的中心地位有了新的认识。本次从汇编语言到高级编程语言的探讨,展示了无论技术如何进步,构成程序的核心—算法和数据结构—始终保持其基础和不变的角色。 …

图解堆排序【一眼看穿逻辑思路】

P. S.:以下代码均在VS2019环境下测试,不代表所有编译器均可通过。 P. S.:测试代码均未展示头文件stdio.h的声明,使用时请自行添加。 目录 1、堆的概念2、实现堆排序前的准备工作3、堆排序的思路3.1 第一步3.2 第二步 4、结语 1、…

音视频捕捉技术:LCC382 SDI采集卡深度解析

在日新月异的多媒体时代,高质量的音视频采集已成为众多领域不可或缺的一环。为此,灵卡科技精心打造了LCC382 —— 一款集高效性、灵活性与前沿技术于一身的SDI输入与环出、HDMI输出音视频采集卡,旨在满足从专业直播、视频会议到医疗影像、安防…

网页版Figma汉化

最近学习Figma,简单介绍一下网页版Figma的汉化方法 1.打开网址:Figma软件汉化-Figma中文版下载-Figma中文社区 2.下载汉化插件离线包 解压汉化包 3.点开谷歌的管理扩展程序 4.点击加载已解压的扩展程序,选择刚刚解压的包 这样就安装好了汉化…

QT状态机2-含终止状态的嵌套状态机

#include "MainWindow.h" #include "ui_MainWindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)

前馈神经网络FNN、多层感知机MLP和反向传播推导

目录 一、前馈神经网络FNN 激活函数的使用 二、多层感知机MLP MLP的典型结构 多层感知机MLP的特点 和前馈神经网络FNN的区别 三、传播推导 1、前向传播(Forward propagation) (1)输入层到隐藏层 (2)隐藏层到输出层 2、…

Java面试八股之WeakHashMap的工作原理

简述WeakHashMap的工作原理 弱键(Weak Keys): WeakHashMap 的键(keys)是通过 WeakReference 弱引用进行封装的。弱引用是一种特殊的引用类型,它不会阻止所引用的对象被垃圾收集器回收。这意味着&#xff…

冥想训练具体方法有哪些|流静冥想

冥想是一种身体的放松和敏锐的警觉性相结合的状态。 每日练习的好处远不止你花在集中注意力的那几分钟。桑托雷利是建在乌斯特的马萨诸塞大学医学院的减压诊所的所长,她也是《自愈》的作者,她说:"冥想是一种工具,通过练习&a…

ubuntu无法远程连接,ssh不可用,ssh远程连接被拒绝的解决方法。启动sshd远程连接

1、用以下命令检查ssh状态 systemctl status sshd2、如果查不到sshd状态,或提示没有ssh,就安装ssh服务器和客户机 $ sudo apt install openssh-server # 安装ssh服务器 $ sudo apt install openssh-client # 安装ssh客户机3、如果不能安装openssh-…

构建安全的GenAI/LLMs核心技术解密之大模型对抗攻击(一)

LlaMA 3 系列博客 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (三) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (四) 基于 LlaMA…