1. PingCode智库首页
  2. 百科

js怎么将页面传值

Edit1 • • 百科

js怎么将页面传值

通过JavaScript在网页之间传值的常见方法包括：URL参数、localStorage、sessionStorage、Cookies。下面将详细介绍其中的一种方法：

使用URL参数： URL参数通过在URL末尾添加查询字符串的方式，将数据传递到目标页面。查询字符串通常由键值对组成，例如?key=value。这种方法适用于需要通过链接在不同页面之间传递少量数据的场景。具体实现步骤如下：

  1. 在发送数据的页面中构建带参数的URL：假设我们有一个表单，用户输入数据后点击提交按钮，我们会将数据附加到URL中并跳转到目标页面。
  2. 在目标页面中解析URL参数：目标页面加载时，解析URL中的查询字符串，获取传递的数据。

通过这种方式，我们可以实现页面之间的数据传递，下面将详细介绍具体实现步骤。

一、使用URL参数传递数据

1、构建带参数的URL

首先，我们需要在发送数据的页面中构建带参数的URL。假设我们有一个简单的表单，用户可以输入姓名和年龄，然后点击提交按钮将数据传递到目标页面。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>发送数据页面</title>


</head>


<body>


    <form id="dataForm">


        <label for="name">姓名:</label>


        <input type="text" id="name" name="name"><br><br>


        <label for="age">年龄:</label>


        <input type="text" id="age" name="age"><br><br>


        <button type="button" onclick="sendData()">提交</button>


    </form>


    <script>


        function sendData() {


            const name = document.getElementById('name').value;


            const age = document.getElementById('age').value;


            const url = `target.html?name=${encodeURIComponent(name)}&age=${encodeURIComponent(age)}`;


            window.location.href = url;


        }


    </script>


</body>


</html>

在上面的代码中，当用户点击提交按钮时，sendData()函数会获取表单中的姓名和年龄，并将它们附加到目标页面的URL中，然后跳转到目标页面。

2、解析URL参数

接下来，我们需要在目标页面中解析URL参数并显示传递的数据。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>目标页面</title>


</head>


<body>


    <h1>接收到的数据</h1>


    <p id="displayData"></p>


    <script>


        function getQueryParams() {


            const params = {};


            const queryString = window.location.search.substring(1);


            const pairs = queryString.split('&');


            pairs.forEach(pair => {


                const [key, value] = pair.split('=');


                params[decodeURIComponent(key)] = decodeURIComponent(value);


            });


            return params;


        }


        const params = getQueryParams();


        const displayData = `姓名: ${params.name}, 年龄: ${params.age}`;


        document.getElementById('displayData').innerText = displayData;


    </script>


</body>


</html>

在目标页面中，我们定义了一个getQueryParams()函数来解析URL中的查询字符串，并将解析后的参数存储在一个对象中。然后，我们将这些参数显示在页面上。

二、使用localStorage传递数据

1、存储数据

localStorage 是一种在客户端存储数据的方式，数据存储在用户的浏览器中，且没有过期时间。我们可以在发送数据的页面中将数据存储到localStorage中。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>发送数据页面</title>


</head>


<body>


    <form id="dataForm">


        <label for="name">姓名:</label>


        <input type="text" id="name" name="name"><br><br>


        <label for="age">年龄:</label>


        <input type="text" id="age" name="age"><br><br>


        <button type="button" onclick="sendData()">提交</button>


    </form>


    <script>


        function sendData() {


            const name = document.getElementById('name').value;


            const age = document.getElementById('age').value;


            localStorage.setItem('name', name);


            localStorage.setItem('age', age);


            window.location.href = 'target.html';


        }


    </script>


</body>


</html>

在上面的代码中，当用户点击提交按钮时，sendData()函数会将表单中的姓名和年龄存储到localStorage中，然后跳转到目标页面。

2、读取数据

接下来，我们需要在目标页面中读取localStorage中的数据并显示。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>目标页面</title>


</head>


<body>


    <h1>接收到的数据</h1>


    <p id="displayData"></p>


    <script>


        const name = localStorage.getItem('name');


        const age = localStorage.getItem('age');


        const displayData = `姓名: ${name}, 年龄: ${age}`;


        document.getElementById('displayData').innerText = displayData;


    </script>


</body>


</html>

在目标页面中，我们使用localStorage.getItem()方法读取存储的数据，并将这些数据显示在页面上。

三、使用sessionStorage传递数据

1、存储数据

sessionStorage 与 localStorage 类似，但数据只在当前会话中有效，关闭浏览器窗口或标签页后数据会被清除。我们可以在发送数据的页面中将数据存储到sessionStorage中。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>发送数据页面</title>


</head>


<body>


    <form id="dataForm">


        <label for="name">姓名:</label>


        <input type="text" id="name" name="name"><br><br>


        <label for="age">年龄:</label>


        <input type="text" id="age" name="age"><br><br>


        <button type="button" onclick="sendData()">提交</button>


    </form>


    <script>


        function sendData() {


            const name = document.getElementById('name').value;


            const age = document.getElementById('age').value;


            sessionStorage.setItem('name', name);


            sessionStorage.setItem('age', age);


            window.location.href = 'target.html';


        }


    </script>


</body>


</html>

在上面的代码中，当用户点击提交按钮时，sendData()函数会将表单中的姓名和年龄存储到sessionStorage中，然后跳转到目标页面。

2、读取数据

接下来，我们需要在目标页面中读取sessionStorage中的数据并显示。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>目标页面</title>


</head>


<body>


    <h1>接收到的数据</h1>


    <p id="displayData"></p>


    <script>


        const name = sessionStorage.getItem('name');


        const age = sessionStorage.getItem('age');


        const displayData = `姓名: ${name}, 年龄: ${age}`;


        document.getElementById('displayData').innerText = displayData;


    </script>


</body>


</html>

在目标页面中，我们使用sessionStorage.getItem()方法读取存储的数据，并将这些数据显示在页面上。

四、使用Cookies传递数据

1、存储数据

Cookies 是一种在客户端存储数据的方式，可以设置过期时间。我们可以在发送数据的页面中将数据存储到Cookies中。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>发送数据页面</title>


</head>


<body>


    <form id="dataForm">


        <label for="name">姓名:</label>


        <input type="text" id="name" name="name"><br><br>


        <label for="age">年龄:</label>


        <input type="text" id="age" name="age"><br><br>


        <button type="button" onclick="sendData()">提交</button>


    </form>


    <script>


        function setCookie(name, value, days) {


            const date = new Date();


            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));


            const expires = "expires=" + date.toUTCString();


            document.cookie = name + "=" + value + ";" + expires + ";path=/";


        }


        function sendData() {


            const name = document.getElementById('name').value;


            const age = document.getElementById('age').value;


            setCookie('name', name, 1);


            setCookie('age', age, 1);


            window.location.href = 'target.html';


        }


    </script>


</body>


</html>

在上面的代码中，当用户点击提交按钮时，sendData()函数会将表单中的姓名和年龄存储到Cookies中，然后跳转到目标页面。

2、读取数据

接下来，我们需要在目标页面中读取Cookies中的数据并显示。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>目标页面</title>


</head>


<body>


    <h1>接收到的数据</h1>


    <p id="displayData"></p>


    <script>


        function getCookie(name) {


            const value = `; ${document.cookie}`;


            const parts = value.split(`; ${name}=`);


            if (parts.length === 2) return parts.pop().split(';').shift();


        }


        const name = getCookie('name');


        const age = getCookie('age');


        const displayData = `姓名: ${name}, 年龄: ${age}`;


        document.getElementById('displayData').innerText = displayData;


    </script>


</body>


</html>

在目标页面中，我们定义了一个getCookie()函数来读取指定名称的Cookie，并将这些数据显示在页面上。

总结

通过JavaScript，我们可以使用多种方法在网页之间传递数据，包括URL参数、localStorage、sessionStorage和Cookies。每种方法都有其优点和适用场景，开发者可以根据具体需求选择合适的方法。对于需要在多个页面之间传递数据的复杂项目，可以考虑使用专业的项目管理系统，如研发项目管理系统PingCode和通用项目协作软件Worktile，以提高团队协作效率和项目管理效果。

相关问答FAQs：

1. 如何使用JavaScript将页面间的数值传递？
JavaScript提供了多种方式来实现页面间的数值传递。你可以使用URL参数、表单提交、本地存储或者使用JavaScript框架等方法。

2. 如何使用URL参数传递数值？
可以通过URL参数将数值传递给另一个页面。你可以使用JavaScript的location对象来获取当前页面的URL，然后在URL后面添加参数。在接收页面，你可以使用JavaScript的URLSearchParams来获取URL参数的值。

3. 如何使用表单提交传递数值？
通过表单提交可以将数值传递给另一个页面。你可以在HTML中创建一个表单，并使用JavaScript的form对象来获取表单中的数值。在提交表单时，你可以将数值传递给另一个页面，然后在接收页面通过JavaScript来获取传递的数值。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3918283

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部