请看以下示范:
请看以下示范:
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页面跳转以及页面间传值方法
基础教程推荐
猜你喜欢
- Ajax实现异步用户名验证功能 2022-12-28
- ajax数据返回进行遍历的实例讲解 2023-02-22
- jQuery实现的自定义轮播图功能详解 2023-12-19
- 一些常用的JavaScript函数(json)附详细说明 2023-12-27
- vue swiper动态添加轮播图 2023-10-08
- 从html表单插入数据到sql数据库(html,php,sql)时未保存输入的值 2023-10-25
- uni-app如何实现点击按钮全屏播放视频 2023-08-29
- http://www.sky.franken.de/doxy/explorer/structIShellBrowserImpl.html 2023-10-25
- 一起来学习JavaScript的BOM操作 2023-12-01
- Web Components入门教程示例详解 2023-08-08
