正文

掌握JS跨页面传值技巧，轻松实现父子页面数据共享

/0 浏览量
0524

在网页开发过程中，我们经常需要在不同页面之间进行数据共享。JavaScript为我们提供了多种跨页面传值的技巧，使得父子页面之间的数据交互变得轻松简单。本文将详细介绍这些技巧，并给出具体的示例代码，帮助你更好地理解和应用。

一、通过URL传递参数

这是最简单的一种跨页面传值方式。通过在URL中添加查询参数，我们可以将数据从一个页面传递到另一个页面。

示例

  1. 父页面（index.html）：
<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <a href="child.html?id=12345">跳转到子页面</a>
</body>
</html>
  1. 子页面（child.html）：
<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
    <script>
        function receiveData() {
            var urlParams = new URLSearchParams(window.location.search);
            var id = urlParams.get('id');
            console.log('Received ID:', id);
        }
    </script>
</head>
<body onload="receiveData()">
    <h1>子页面</h1>
</body>
</html>

在这个例子中，当用户点击父页面中的链接时，子页面会通过window.location.search获取到URL中的查询参数，从而实现数据传递。

二、通过本地存储（localStorage）

本地存储是Web API提供的一种在本地保存数据的方式，它可以跨页面访问。以下是如何使用localStorage进行跨页面传值。

示例

  1. 父页面（index.html）：
<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <script>
        var data = {name: '张三', age: 18};
        localStorage.setItem('user', JSON.stringify(data));
        window.location.href = 'child.html';
    </script>
</body>
</html>
  1. 子页面（child.html）：
<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
</head>
<body>
    <script>
        var data = JSON.parse(localStorage.getItem('user'));
        console.log('Received data:', data);
    </script>
</body>
</html>

在这个例子中，父页面在跳转前将数据存储到localStorage中，子页面在加载时读取这些数据。

三、通过WebSockets

WebSockets允许在客户端和服务器之间建立一个持久的连接，从而实现实时数据传输。以下是如何使用WebSockets进行跨页面传值。

示例

  1. 父页面（index.html）：
<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <script>
        var ws = new WebSocket('ws://localhost:8080');
        ws.onopen = function(event) {
            ws.send(JSON.stringify({action: 'setUser', data: {name: '张三', age: 18}}));
        };
    </script>
</body>
</html>
  1. 子页面（child.html）：
<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
</head>
<body>
    <script>
        var ws = new WebSocket('ws://localhost:8080');
        ws.onmessage = function(event) {
            var data = JSON.parse(event.data);
            if (data.action === 'setUser') {
                console.log('Received data:', data.data);
            }
        };
    </script>
</body>
</html>

在这个例子中，父页面通过WebSockets向服务器发送数据，子页面从服务器接收这些数据。

总结

以上介绍了三种常见的跨页面传值技巧。在实际应用中，我们可以根据需求选择合适的方法。希望本文能帮助你更好地理解和应用这些技巧。

-- 展开阅读全文 --