JS实用功能-11、页面参数传递到下一页面
好久没和大家见面了,今天继续和大家讲讲JS中的实用功能,如何在页面间传递参数。
页面携带参数跳转的需求,碰到过不少,下面就说说在日常开发中常用到的原生的一些方法吧!
一、地址栏传递
在浏览器地址栏的URL中,除了我们看到的域名路径外,其实还可以通过‘?’来添加参数。
const BASE_URL = 'http://example.com/path/index.html?message=hello&who=world';
从上面的一串路径可以得到的参数有:
//=>message = 'hello' //=>who = 'world'
那么用法是怎样的呢?当需要从当前页面跳转到下一页面,我们可以在跳转的路径后面用'?'分别添加‘key’和‘value’,多个参数记得用'&'连接符。
window.location.href = '/path/index.html?message=hello&who=world';
在使用href跳转方法后,当前页面跳转到了index页面,地址栏中也相应的变化了。
接下来要做的就是获取index页面中的参数:
const getQuery = function(name) { const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); const r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURI(r[2]); } return null; } console.log(getQuery('message'), getQuery('who')); //=> hello, world
还可以通过URL()方法来获取:
const url = new URL(window.location.href); url.searchParams.get('message'); // => 'hello' url.searchParams.get('missing'); // => null
二、sessionStorage传递
sessionStorage属性允许在浏览器中存储 key/value 对的数据,但sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
当我们要进行页面跳转的时候,可以设置sessionStorage:
window.sessionStorage.setItem('name', 'padding2020');
可以在浏览器开发者模式下的application看到设置的缓存。
在跳转后页面,通过getItem方法来获取:
window.sessionStorage.getItem('name'); //=> 'padding2020'
需要注意的是:打开多个相同的URL的Tabs页面,会创建各自的sessionStorage
。
三、localStorage传递
localStorage
类似 sessionStorage,但其区别在于:存储在 localStorage
的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage
的数据会被清除 。
另外,localStorage
中的键值对总是以字符串的形式存储。
window.localStorage.setItem('name', 'padding2020');
增加完毕之后,同样的可以在浏览器开发者工具下的application中看到:
想要获取的话,可以通过getItem方法获取。
window.localStorage.getItem('name'); //=> 'padding2020'
四、总结
上面三种是平常在原生JS开发中用的最多的了,可以根据需要来使用。
当然也还有其他的方法,比如vue框架中就封装有页面传参的方法,总之,方法肯定是比需求多的。
原文地址:https://www.cnblogs.com/liao123/p/14670797.html
- sqoop2系统入门之2汇总:用户指南shell命令
- 深入解析golang编程中函数的用法
- MySQL数据库(一):安装MySQL数据库
- Spring Security入门(二):基于数据库验证
- flume搜集日志:如何解决实时不断追加的日志文件及不断增加的文件个数问题
- hduoj-----(2896)病毒侵袭(ac自动机)
- MySQL数据库(二):基本管理
- Golang编程实现生成n个从a到b不重复随机数的方法
- TiDB 在株式会社 FUNYOURS JAPAN 的应用
- MySQL数据库(三):数据类型
- spark开发环境详细教程2:window下sbt库的设置
- hdu----(2222)Keywords Search(ac自动机)
- MySQL数据库(四):约束条件
- hdu----(2084)数塔(dp)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SwiftUI:手动发布 ObservableObject 更改
- 卧槽,又一款 Markdown 组合神器!!!
- SQL-查询各工程项目使用所提供零件最多的供应商
- 浙大版《C语言程序设计(第3版)》题目集 习题8-3 数组循环右移
- SwiftUI:控制图像插值
- SQL-查询比p6零件供应数量都高的零件
- 浙大版《C语言程序设计(第3版)》题目集 习题8-5 使用函数实现字符串部分复制
- 最小生成树-Magicpig密室出逃(Kruskal+并查集)
- 浙大版《C语言程序设计(第3版)》题目集 习题8-6 删除字符
- SQL-显示供应商供应零件的汇总列表(with rollup+coalesce)
- 浙大版《C语言程序设计(第3版)》题目集 习题8-8 判断回文字符串
- 双向广搜-HDU1401 Solitaire
- TCP三次握手和四次挥手以及11种状态
- 浙大版《C语言程序设计(第3版)》题目集 题8-9 分类统计各类字符个数
- 迭代加深搜索-POJ 3134 Power Calculus