请看以下示范:
请看以下示范:
JAVASCRIPT实现的WEB页面跳转以及页面间传值
页面跳转
在 JavaScript 中,可以通过修改 window.location
对象的属性来实现页面跳转。
直接跳转
// 直接跳转到目标 URL
window.location = "https://www.example.com";
重定向跳转
// 通过重定向跳转到目标 URL
window.location.replace("https://www.example.com");
页面传值
在跳转页面时,有时需要将数据传递给目标页面,可以使用以下两种方式进行传值:
URL 参数传值
可以将需要传递的数据作为 URL 参数在跳转时传递给目标页面,目标页面可以通过解析 URL 参数来获取传递的数据。
例如,需要在跳转时传递用户名和密码:
// 构建跳转 URL
let url = "https://www.example.com/login.html";
url += "?username=johndoe";
url += "&password=123456";
// 跳转到目标页面,同时传递参数
window.location = url;
在目标页面中解析 URL 参数:
// 获取 URL 中的参数
let searchParams = new URLSearchParams(window.location.search);
// 获取传递的用户名和密码
let username = searchParams.get("username");
let password = searchParams.get("password");
localStorage 存储传值
可以使用 localStorage
对象在本地存储数据,从而实现页面传值的目的。需要注意的是,使用 localStorage
存储的数据只能被同域名的页面访问。
例如,需要在页面 A 中存储数据,并在页面 B 中获取:
// 页面 A 中存储数据
localStorage.setItem("username", "johndoe");
localStorage.setItem("password", "123456");
// 跳转到页面 B
window.location = "https://www.example.com/page-b.html";
在页面 B 中获取存储的数据:
// 获取存储的用户名和密码
let username = localStorage.getItem("username");
let password = localStorage.getItem("password");
// 删除存储的数据(可选)
localStorage.removeItem("username");
localStorage.removeItem("password");
以上就是 JAVASCRIPT 实现的 WEB 页面跳转以及页面间传值的完整攻略。
沃梦达教程
本文标题为:JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
基础教程推荐
猜你喜欢
- css3+伪元素实现鼠标移入时下划线向两边展开的效果 2023-12-22
- 从html表单插入数据到sql数据库(html,php,sql)时未保存输入的值 2023-10-26
- 全面解析Bootstrap中transition、affix的使用方法 2024-01-22
- php – 将html表单数据发送到mysql数据库 2023-10-26
- JavaScript Rxjs mergeMap 的使用场合 2024-02-07
- JavaScrip简单数据类型隐式转换的实现 2023-07-09
- Ajax基础与登入教程 2023-01-31
- Vue 配置脚手架CLI 3 2023-10-08
- Vue框架基础——迈出第一步 2023-10-08
- AJAX实现跨域的三种方法(代理,JSONP,XHR2) 2022-12-15