请看以下示范:
请看以下示范:
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页面跳转以及页面间传值方法


基础教程推荐
猜你喜欢
- TWebBrowser 与 MSHTML(3): window 对象的属性、方法、事件纵览 2023-10-26
- CSS3近阶段篇之酷炫的3D旋转透视 2023-12-30
- Vue——render函数 2023-10-08
- 简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器 2024-01-06
- django ajax提交评论并自动刷新功能的实现代码 2023-02-13
- Jquery Ajax请求方法小结(值得收藏) 2022-10-17
- 使用jquery自定义鼠标样式满足个性需求 2023-12-28
- 切记ajax中要带上AntiForgeryToken防止CSRF攻击 2022-10-17
- JavaScript的Cookies 2024-01-06
- JavaScript实现div的鼠标拖拽效果 2023-12-29