js表单数据怎么在另一个网页使用

在 JavaScript 中，您可以通过多种方式在不同网页之间传递表单数据，包括使用 URL 参数、localStorage、sessionStorage 和 Cookies 等。 这几种方法各有优缺点，具体使用哪种方法取决于您的需求。下面我们详细探讨其中的一种方法：使用 localStorage 来实现数据传递。

URL 参数： URL 参数是一种简单且直接的方法，可以通过在表单提交时将数据附加到 URL 后面，然后在目标页面解析这些参数来获取数据。

localStorage： localStorage 是一种持久化存储方法，数据保存在用户的浏览器中，直到被显式删除。使用它可以在不同页面之间共享数据，而不需要服务器的参与。

接下来，我们将详细探讨如何使用 localStorage 在不同网页之间传递表单数据。

一、URL 参数传递方法

1.1、构建 URL 参数

在表单提交时，将表单数据编码成 URL 参数。假设我们有一个简单的表单：

<form id="myForm" action="page2.html" method="GET">
  <input type="text" name="username" placeholder="Enter your name">
  <input type="email" name="email" placeholder="Enter your email">
  <button type="submit">Submit</button>
</form>

这个表单提交时，将数据以 URL 参数的形式附加到 page2.html 后面，例如：page2.html?username=JohnDoe&email=johndoe@example.com

1.2、解析 URL 参数

在目标页面（page2.html），您可以使用 JavaScript 来解析这些 URL 参数：

window.onload = function() {
  const params = new URLSearchParams(window.location.search);
  const username = params.get('username');
  const email = params.get('email');
  document.getElementById('displayUsername').innerText = username;
  document.getElementById('displayEmail').innerText = email;
};

假设目标页面有以下 HTML 结构，用于显示传递过来的数据：

<div>
  <p>Username: <span id="displayUsername"></span></p>
  <p>Email: <span id="displayEmail"></span></p>
</div>

二、使用 localStorage 传递数据

2.1、存储数据

在表单提交时，使用 JavaScript 将表单数据存储到 localStorage：

<form id="myForm">
  <input type="text" id="username" placeholder="Enter your name">
  <input type="email" id="email" placeholder="Enter your email">
  <button type="button" onclick="storeData()">Submit</button>
</form>
<script>
  function storeData() {
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    localStorage.setItem('username', username);
    localStorage.setItem('email', email);
    window.location.href = 'page2.html';
  }
</script>

2.2、读取数据

在目标页面（page2.html），您可以使用 JavaScript 从 localStorage 中读取数据：

window.onload = function() {
  const username = localStorage.getItem('username');
  const email = localStorage.getItem('email');
  document.getElementById('displayUsername').innerText = username;
  document.getElementById('displayEmail').innerText = email;
};

假设目标页面有以下 HTML 结构，用于显示传递过来的数据：

<div>
  <p>Username: <span id="displayUsername"></span></p>
  <p>Email: <span id="displayEmail"></span></p>
</div>

三、使用 sessionStorage 传递数据

3.1、存储数据

与 localStorage 类似，只是数据在浏览器会话结束时被清除。使用 sessionStorage 的方法如下：

<form id="myForm">
  <input type="text" id="username" placeholder="Enter your name">
  <input type="email" id="email" placeholder="Enter your email">
  <button type="button" onclick="storeData()">Submit</button>
</form>
<script>
  function storeData() {
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    sessionStorage.setItem('username', username);
    sessionStorage.setItem('email', email);
    window.location.href = 'page2.html';
  }
</script>

3.2、读取数据

在目标页面（page2.html），从 sessionStorage 中读取数据：

window.onload = function() {
  const username = sessionStorage.getItem('username');
  const email = sessionStorage.getItem('email');
  document.getElementById('displayUsername').innerText = username;
  document.getElementById('displayEmail').innerText = email;
};

四、使用 Cookies 传递数据

4.1、存储数据

使用 JavaScript 设置 Cookies：

<form id="myForm">
  <input type="text" id="username" placeholder="Enter your name">
  <input type="email" id="email" placeholder="Enter your email">
  <button type="button" onclick="storeData()">Submit</button>
</form>
<script>
  function storeData() {
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    document.cookie = `username=${username}; path=/`;
    document.cookie = `email=${email}; path=/`;
    window.location.href = 'page2.html';
  }
</script>

4.2、读取数据

在目标页面（page2.html），解析 Cookies：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
window.onload = function() {
  const username = getCookie('username');
  const email = getCookie('email');
  document.getElementById('displayUsername').innerText = username;
  document.getElementById('displayEmail').innerText = email;
};

五、总结

通过以上方法，您可以在不同网页之间传递表单数据。具体使用哪种方法取决于您的需求和应用场景：

URL 参数：适用于简单的数据传递，但数据可能被用户看到和修改。
localStorage：适用于需要持久化存储的数据，在多个会话之间保持一致。
sessionStorage：适用于仅在当前会话中共享数据。
Cookies：适用于需要在客户端和服务器之间共享数据。

在实际应用中，您可能会结合使用多种方法，以满足不同的需求。 例如，在开发一个复杂的项目管理系统时，您可以使用 localStorage 来存储用户设置和偏好，使用 Cookies 来管理用户会话，使用 URL 参数来传递临时数据。

推荐使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile 来提升团队的项目管理效率。