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