正文

如何填写表单后，在页面跳转时保留并使用提交的数据

/0 浏览量
0412

当你在网上填写表单并提交后，通常情况下，表单数据会被发送到服务器进行后续处理，页面会跳转到新的页面，这时，表单中的数据会丢失。然而，有一些方法可以实现在页面跳转后保留并使用提交的数据。以下是一些常见的方法：

1. 使用 URL 查询参数

方法描述：在表单提交后，可以将数据作为查询参数附加到 URL 上，然后在目标页面解析这些参数。

示例：

<!-- 表单页面 -->
<form action="submit.html" method="get">
  <input type="text" name="username" value="John Doe">
  <input type="text" name="email" value="john@example.com">
  <input type="submit" value="Submit">
</form>

<!-- 跳转后的页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Result Page</title>
</head>
<body>
  <h1>Thank you, {{ username }}!</h1>
  <p>Your email is: {{ email }}</p>
</body>
</html>

注意：这种方法适用于小量的数据，并且需要注意 URL 长度的限制。

2. 使用 LocalStorage 或 SessionStorage

方法描述：利用浏览器的 LocalStorage 或 SessionStorage 功能，在提交表单时将数据存储在本地，然后在目标页面读取这些数据。

示例：

// 表单提交时
function submitForm() {
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;

  localStorage.setItem('username', username);
  localStorage.setItem('email', email);

  // 页面跳转
  window.location.href = 'result.html';
}

// 跳转后的页面
function loadFormData() {
  const username = localStorage.getItem('username');
  const email = localStorage.getItem('email');

  if (username && email) {
    // 显示数据
    document.getElementById('username').value = username;
    document.getElementById('email').value = email;
  }
}

// 在页面加载时调用
window.onload = loadFormData;

注意：LocalStorage 和 SessionStorage 存储的数据是文本格式的，需要根据实际需求进行解析。

3. 使用 Cookies

方法描述：利用 Cookies 功能，在提交表单时将数据存储在 Cookies 中，然后在目标页面读取这些数据。

示例：

// 表单提交时
function submitForm() {
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;

  document.cookie = 'username=' + encodeURIComponent(username);
  document.cookie = 'email=' + encodeURIComponent(email);

  // 页面跳转
  window.location.href = 'result.html';
}

// 跳转后的页面
function loadFormData() {
  const cookies = document.cookie.split(';');
  let username, email;

  cookies.forEach(cookie => {
    if (cookie.trim().startsWith('username=')) {
      username = decodeURIComponent(cookie.split('=')[1]);
    } else if (cookie.trim().startsWith('email=')) {
      email = decodeURIComponent(cookie.split('=')[1]);
    }
  });

  if (username && email) {
    // 显示数据
    document.getElementById('username').value = username;
    document.getElementById('email').value = email;
  }
}

// 在页面加载时调用
window.onload = loadFormData;

注意：Cookies 有存储大小限制，并且可能会被浏览器或用户手动删除。

4. 使用 Web Storage API

方法描述：结合 LocalStorage、SessionStorage 和 Cookies，实现更灵活的数据存储和读取。

示例：

// 表单提交时
function submitForm() {
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;

  localStorage.setItem('username', username);
  localStorage.setItem('email', email);

  // 页面跳转
  window.location.href = 'result.html';
}

// 跳转后的页面
function loadFormData() {
  const username = localStorage.getItem('username');
  const email = localStorage.getItem('email');

  if (username && email) {
    // 显示数据
    document.getElementById('username').value = username;
    document.getElementById('email').value = email;
  }
}

// 在页面加载时调用
window.onload = loadFormData;

注意：Web Storage API 提供了更丰富的功能，如键值对存储、监听存储事件等。

总结

在页面跳转后保留并使用提交的数据，可以根据实际需求选择合适的方法。以上介绍了四种常见的方法，各有优缺点，你可以根据实际情况进行选择。

-- 展开阅读全文 --