javascript上怎么实现页面跳转和传值

发布时间：2023-10-13 10:30:07 所属栏目：教程来源：未知

导读： 　　本篇内容介绍了“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>

　　    /**

　　      * 获取 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>

　　</body>

　　</html>

　　在页面一中，当点击提交按钮时，会执行 submitForm 方法，将表单中的数据拼接成一个参数并传递到页面二中。在页面二中，会通过 getSearchParams 方法获取 URL 参数并显示在页面上。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!