前端网页之间传递参数

在多页面应用中,我们可能面临着前端页面之间传递参数的情况,在一个页面获取到一些参数信息后,到另一个页面去进行后续处理,需要将前一个页面得到的一些参数带到第二个页面。当参数较少时,可以在跳转第二个页面时通过search方法把参数传递过去,其实就是这样的方式:

windows.location = pagepath+'?arg='+arg;

第二个页面可以这样把参数取出来:

var reg = new RegExp("(^|&)" + "arg" + "=([^&]*)(&|$)","i");
var arg = location.search.substr(1).match(reg);

由于参数放在search串里,会显示在浏览器的地址栏,另外url有长度限制,参数多了也不美观。
参数较多的情况有什么更好的办法么?
这里要推荐用HTML本地存储-window.localStorage和window.sessionStorage了,两种方式使用方法一样,都是本地KV方式设置读取和删除。不同之处在于localStorage 存储的是没有截止日期的数据,而sessionStorage 存储的数据仅在当前标签页有效,如果用户关闭该浏览器标签页,数据会被删除,在别的标签页打开也是读不到数据的。
赋值参数页面

localStorage.setItem("key1", va1ue1);
localStorage.setItem("key2", value2);
sessionStorage.setItem("key3", va1ue3);
sessionStorage.setItem("key4", value4);

获取参数页面

var value1 = localStorage.getItem("key1");
var value2 = localStorage.getItem("key2");
localStorage.removeItem("key1");
var value3 = sessionStorage.getItem("key3");
var value4 = sessionStorage.getItem("key4");
sessionStorage.removeItem("key4");

两种本地存储在使用场景上要注意下。由于localStorage是本地全局级的,也就是说它不适用同一客户端的多实例,因为当你已经打开了一个赋值页面并进行了一次赋值,尚未跳转到获值页面,再在第二个标签页再次打开赋值的页面并进行了一次赋值,实际上会将你之前赋过的值覆盖掉,这样你再在第一个标签页进入获值页面,那么它获取的实际上是最后一次的赋值,也就是说它是不支持多赋值并行的。而sessionStorage则没有了这个限制,你可以打开任意多个标签页去赋值,任意顺序去跳转到获值页面都没有逻辑上的错误。

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

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

相关文章

前端-深入探讨网络面试题

第一关 请求-文件、数据、连接 文件类的请求:加载HTMl、CSS 数据: ajax请求(基于HTTP,HTTP基于TCP),如何建立连接的(三次握手,为什么不是两次或者四次),sock…

《QT实用小工具·四》屏幕拾色器

1、概述 源码放在文章末尾 该项目实现了屏幕拾色器的功能,可以根据鼠标指定的位置识别当前位置的颜色 项目功能包含: 鼠标按下实时采集鼠标处的颜色。 实时显示颜色值。 支持16进制格式和rgb格式。 实时显示预览颜色。 根据背景色自动计算合适的前景色…

AIGC重塑金融:AI大模型驱动的金融变革与实践

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-tVrfBkGvUD0Qi13F {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

学习java第二十七天

Spring框架作为IOC容器的落地实现,提供了一个灵活的"插座",其他组件只需要简单的"插上"即可享受Spring提供的基础设施支持- ,并且结合Spring一起使用。 Spring的核心在于它的IOC容器设计,我们可以通过Spring应用程序上下文生命周期和Spring Bean的生命周期…

基于SpringBoot的“游戏分享网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“游戏分享网站”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:SpringBoot 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 系统总体结构图 网站首页界面图 用户注册界面图 …

为什么用了索引,搜索速度还是很慢

索引列选择不当 1.假设有一个包含性别信息的表,其中有1000条记录,其中男性占 99%、女性占 1%。如果在性别列上创建索引,由于选择性太低,大部分查询都会涉及到表中的绝大多数行,这时候数据库优化器可能会认为全表扫描比…

[SpringCloud] Feign Client 的创建 (二) (五)

文章目录 1.自动配置FeignAutoConfiguration2.生成 Feign Client2.1 从Feign Client子容器获取组件2.2 Feign Client子容器的创建2.3 构建Feign Client实例 1.自动配置FeignAutoConfiguration spring-cloud-starter-openfeign 包含了 spring-cloud-openfeign-core FeignAutoCo…

HarmonyOS实战开发-如何实现一个支持加减乘除混合运算的计算器。

介绍 本篇Codelab基于基础组件、容器组件,实现一个支持加减乘除混合运算的计算器。 说明: 由于数字都是双精度浮点数,在计算机中是二进制存储数据的,因此小数和非安全整数(超过整数的安全范围[-Math.pow(2, 53)&#…

【详解】运算放大器工作原理及其在信号处理中的核心作用

什么是运算放大器 运算放大器(简称“运放”)是一种放大倍数非常高的电路单元。在实际电路中,它常常与反馈网络一起组成一定的功能模块。它是一种带有特殊耦合电路和反馈的放大器。输出信号可以是输入信号的加法、减法、微分和积分等数学运算…

vue3+ts项目 | axios 的测试 | 测试接口

在 App.vue 中,测试接口 // 测试接口import request from /utils/request;import { onMounted } from vue;onMounted(() > {request.get(/hosp/hospital/1/10).then((res) > {console.log("APP组件展示获取的数据",res);})}) 在request.ts中&…

link 样式表是否会阻塞页面内容的展示?取决于浏览器,edge 和 chrome 会,但 firefox 不会。

经过实测: 在 head 中 link 一个 1M 大小的样式表。设置网络下载时间大概为 10 秒。 edge 和 chrome 只有在下载完样式表后,页面上才会出现内容。而 firefox 可以直接先显示内容,然后等待样式表下载完成后再应用样式。 DOMContentLoaded 事…

Vue指令之v-for

跟其他语言中的for一样,是用来渲染多个类似实例的。 语法为v-for"(item, index) in 可迭代对象",一般就用于遍历数组。这里的语法跟Python中的for循环enumerate也有点相似之处,但要注意item在前,index在后,…

探索Java学习的精华:必备资料分享

239程序员职业规划手册 238手把手带你写一个MiniTomcat 237Rust语言从入门到实战 236超级访谈:对话道哥 235LangChain实战课 234云时代的JVM原理与实战 233AI大模型系统实战 231AI绘画核心技术与实战【未完整】 Java核心技术面试精讲 从0开始学架构 推荐系统三十六式…

CommandLineRunner解释学习

目录 一、CommandLineRunner介绍 1.1 接口定义 1.2 工作原理 二、CommandLineRunner作用 三、CommandLineRunner使用方式 3.1 实现CommandLineRunner 3.2 配置Spring Boot项目 四、完整代码地址 小剧场:坚持不懈! 一、CommandLineRunner介绍 Co…

anaconda配置虚拟python环境

使用conda create命令 举例: 创建一个名为breed的新环境,并在其中安装python 3.7版本的步骤: 创建虚拟环境 conda create --name breed python3.7激活新创建的环境: conda activate breed查看存在的虚拟环境 conda env list退…

复杂度3 二分查找函数

文章预览&#xff1a; 题目算法代码 题目 算法 本题要求用二分法查找顺序表的一个值&#xff0c;比较简单注意指针格式即可 代码 Position BinarySearch( List L, ElementType X ) {int begin1,mid;int endL->Last;ElementType temp;while(begin<end){mid(beginend)/2…

【Spring Security】 快速入门

文章目录 一、 身份认证Demo1、创建工程2、代码编写2.1、Controller2.2、Html2.3、application.properties配置 3、启动项目并访问 二、Spring Security 默认做了什么二、底层原理1.概述2.FiltersDelegatingFilterProxyFilterChainProxySecurityFilterChainSecurity Filters 三…

Java学习指南:从基础到进阶,一篇文章带你全面了解!

一、Java语言概述 Java是一种面向对象的编程语言&#xff0c;它不仅吸收了C语言的各种优点&#xff0c;还摒弃了C里难以理解的多继承、指针等概念。Java语言具有功能强大和简单易用两个特征&#xff0c;即Java语言作为静态面向对象编程语言的代表&#xff0c;极好地实现了面向…

vue3-pinia使用(末尾有彩蛋)

什么是 pinia Pinia 是 Vue 的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态。 之前用的是 vuex&#xff0c;后面 vue 官方团队不维护了&#xff0c;推荐使用 pinia 安装 yarn add pinia # 或者使用 npm npm install piniapnpm install piniaStore 是什么&#xf…

实验一 Python集成开发环境的搭建及可视化库的安装

一、安装集成开发环境 下载安装包 官方网址&#xff1a; Free Download | Anaconda 或者镜像网站下载&#xff08;较快&#xff09; https://repo.anaconda.com/archive/ 安装 配置环境变量 验证 输入&#xff1a; conda -V 二、下载pyecharts环境 点击 Anaconda Promp…