在前端开发中，经常会涉及到页面跳转和传值的问题。其中 javascript 是一种广泛应用的语言，可以通过其实现页面跳转并传递参数的功能。本文将介绍 javascript 页面跳转和传值的方法，并提供一些应用实例。
一、javascript 实现页面跳转的方法
window.location.hrefwindow.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.openwindow.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');
sessionstoragesessionstorage 是 html5 提供的 web 存储方案，与 localstorage 相似，但是存储的数据是会话级别的，当会话结束时数据会被清除。可以使用 sessionstorage 在页面之间传递数据。例如，在前一个页面中设置传递的参数：
//设置传递的参数
sessionstorage.setitem('username', 'tom');
sessionstorage.setitem('age', 20);
在后一个页面中，可以通过 sessionstorage 获取传递的参数：
//获取传递的参数
const username = sessionstorage.getitem('username');
const age = sessionstorage.getitem('age');
localstoragelocalstorage 也是 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）8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
<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> /** * 获取 url 参数 */ 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>
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
在页面一中，当点击提交按钮时，会执行 submitform 方法，将表单中的数据拼接成一个参数并传递到页面二中。在页面二中，会通过 getsearchparams 方法获取 url 参数并显示在页面上。
总结
本文介绍了 javascript 页面跳转和传值的方法，并提供了一些应用实例，旨在帮助读者更好地理解并掌握这些技术。在实际开发中，应根据情况选择合适的方法，使得页面跳转和传值更加简单、高效、安全。
以上就是javascript 页面跳转 传值的详细内容。