正文

学会JavaScript传递复杂参数：轻松实现网页跳转带多种数据

/0 浏览量
1021

在网页开发中，经常需要实现网页跳转并携带数据。使用JavaScript，我们可以轻松实现这一功能。本文将详细介绍如何通过JavaScript传递复杂参数，实现网页跳转时携带多种数据。

1. 使用URL参数传递数据

URL参数是传递数据的一种简单方法。在跳转时，可以将数据拼接到URL中，通过查询字符串的方式传递。

// 定义数据对象
let data = {
  id: 123,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

// 构建URL参数
let queryString = '?id=' + encodeURIComponent(data.id) +
                 '&name=' + encodeURIComponent(data.name) +
                 '&email=' + encodeURIComponent(data.email);

// 跳转至目标页面，携带参数
window.location.href = 'target.html' + queryString;

2. 使用JavaScript对象传递数据

使用JavaScript对象传递数据，可以更方便地管理多个参数。

// 定义数据对象
let data = {
  id: 123,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

// 使用JSON.stringify()将对象转换为字符串
let dataString = JSON.stringify(data);

// 构建URL参数
let queryString = '?data=' + encodeURIComponent(dataString);

// 跳转至目标页面，携带参数
window.location.href = 'target.html' + queryString;

在目标页面，可以使用JSON.parse()将字符串转换回对象，从而获取传递的数据。

3. 使用localStorage/sessionStorage传递数据

当数据较大时，可以考虑使用localStorage或sessionStorage来存储数据，再在跳转时读取。

// 定义数据对象
let data = {
  id: 123,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

// 存储数据到localStorage
localStorage.setItem('data', JSON.stringify(data));

// 跳转至目标页面
window.location.href = 'target.html';

在目标页面，可以使用localStorage.getItem('data')读取存储的数据，并使用JSON.parse()转换回对象。

4. 使用URL编码和解码

在传递数据时，需要将特殊字符进行编码，避免出现URL解析错误。

// 定义数据对象
let data = {
  id: 123,
  name: 'John Doe <script>alert("Hello")</script>',
  email: 'john.doe@example.com'
};

// 使用JSON.stringify()将对象转换为字符串
let dataString = JSON.stringify(data);

// 使用encodeURIComponent()对字符串进行编码
let queryString = '?data=' + encodeURIComponent(dataString);

// 跳转至目标页面，携带参数
window.location.href = 'target.html' + queryString;

在接收数据时，可以使用decodeURIComponent()对查询字符串进行解码。

5. 示例：传递复杂数据

以下是一个示例，展示如何传递一个复杂的数据对象，并在目标页面进行展示。

源页面（index.html）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Source Page</title>
</head>
<body>
  <h1>Source Page</h1>
  <button onclick="jumpToTarget()">跳转到目标页面</button>

  <script>
    function jumpToTarget() {
      let data = {
        id: 123,
        name: 'John Doe <script>alert("Hello")</script>',
        email: 'john.doe@example.com',
        profile: {
          age: 25,
          city: 'New York'
        }
      };

      let dataString = JSON.stringify(data);
      let queryString = '?data=' + encodeURIComponent(dataString);

      window.location.href = 'target.html' + queryString;
    }
  </script>
</body>
</html>

目标页面（target.html）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Target Page</title>
</head>
<body>
  <h1>Target Page</h1>

  <script>
    let queryString = window.location.search.substring(1);
    let dataString = queryString.split('?data=')[1];
    let data = JSON.parse(decodeURIComponent(dataString));

    console.log(data);
    console.log(data.profile.age);
  </script>
</body>
</html>

通过以上示例，我们可以轻松实现网页跳转并携带复杂数据。希望本文对您有所帮助！

-- 展开阅读全文 --