javascript怎么实现页面跳转和传值
本篇内容介绍了“javascript怎么实现页面跳转和传值”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
一、JavaScript 实现页面跳转的方法
window.location.href
window.location.href 的作用是加载新的页面。通过这个方法，可以在当前页面跳转到指定的页面。例如，下面的代码可以在当前页面跳转到被指定为 “newpage.html” 的页面：
window.location.href = "newpage.html";
在进行页面跳转的同时，也可以向新页面传递参数。例如：
window.location.href = "newpage.html?username=Tom&age=20";
window.location.replace
另一种实现页面跳转的方法是使用 window.location.replace。这个方法的作用是用新的页面替换当前页面。例如，下面的代码将会在当前页面被指定为 “newpage.html” 的页面所替换：
window.location.replace("newpage.html");
对于这个方法而言，在进行页面跳转的同时是不能传递参数的。
window.open
window.open 允许以新的浏览器窗口方式打开一个指定的网页。例如，下面的代码将会在新的窗口中打开一个指定为 “newpage.html” 的页面：
window.open("newpage.html");
同样的，通过这个方法同样可以传递参数。例如：
window.open("newpage.html?username=Tom&age=20");
二、JavaScript 页面传参的方法
URL 传参数
URL 传参数是实现页面传参的一种简单易用的方法，它将参数作为 URL 中的参数传递给新页面。例如：
window.location.href = "newpage.html?username=Tom&age=20";
在新页面中，可以使用 JavaScript 中的 URLSearchParams 对象获取 URL 中的参数。例如：
//获取 URL 中的参数
const searchParams = new URLSearchParams(window.location.search);
//获取用户名
const username = searchParams.get('username');
//获取年龄
const age = searchParams.get('age');
sessionStorage
sessionStorage 是 HTML5 提供的 Web 存储方案，与 localStorage 相似，但是存储的数据是会话级别的，当会话结束时数据会被清除。可以使用 sessionStorage 在页面之间传递数据。例如，在前一个页面中设置传递的参数：
//设置传递的参数
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);
在后一个页面中，可以通过 sessionStorage 获取传递的参数：
//获取传递的参数
const username = sessionStorage.getItem('username');
const age = sessionStorage.getItem('age');
localStorage
localStorage 也是 HTML5 提供的 Web 存储方案，与 sessionStorage 不同的是，localStorage 存储数据是永久性的，即使关闭页面或浏览器也不会被清除。可以使用 localStorage 在页面之间传递数据。例如，在前一个页面中设置传递的参数：
//设置传递的参数
localStorage.setItem('username', 'Tom');
localStorage.setItem('age', 20);
在后一个页面中，可以通过 localStorage 获取传递的参数：
//获取传递的参数
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');
三、应用实例
下面是一个实际应用的例子，实现一个包含表单的页面跳转，并将表单中的数据传递到下一个页面。
页面一（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>页面一</title></head>
<body>
<form> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username"> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password"> </div> <button type="submit" onclick="submitForm()">跳转到页面二</button> </form> <script> function submitForm() { const username = document.getElementById("username").value; const password = document.getElementById("password").value; const params = `username=${username}&password=${password}`; window.location.href = `pageTwo.html?${params}`; } </script></body>
</html>
页面二（pageTwo.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>页面二</title></head>
<body>
<div> <p>用户名:</p> <p id="username"></p> </div> <div> <p>密码：</p> <p id="password"></p> </div> <script> function getSearchParams() { const searchParams = new URLSearchParams(window.location.search); const username = searchParams.get('username'); const password = searchParams.get('password'); document.getElementById("username").innerText = username; document.getElementById("password").innerText = password; } getSearchParams(); </script></body>
</html>
在页面一中，当点击提交按钮时，会执行 submitForm 方法，将表单中的数据拼接成一个参数并传递到页面二中。在页面二中，会通过 getSearchParams 方法获取 URL 参数并显示在页面上。
“javascript怎么实现页面跳转和传值”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
