如何通过按钮将数据发送到另一个页面 - JavaScript

在 Web 开发中，向另一个页面传递数据是非常常见的需求。这可以通过 JavaScript 来实现。本文将介绍如何通过按钮将数据发送到另一个页面。

第一步：创建按钮和表单

首先，我们需要在页面中创建一个表单和一个按钮。

<form>
  <label>
    姓名：
    <input type="text" name="name">
  </label>
  <br>
  <label>
    邮箱：
    <input type="email" name="email">
  </label>
  <br>
  <button type="submit">提交</button>
</form>

上面的代码定义了一个表单，包含姓名和邮箱两个输入框以及一个提交按钮。

第二步：添加按钮点击事件处理程序

接下来，我们需要添加一个按钮点击事件处理程序。当用户点击按钮时，这个处理程序将从表单中获取输入的数据，并保存到本地存储中。

<form>
  <label>
    姓名：
    <input type="text" name="name">
  </label>
  <br>
  <label>
    邮箱：
    <input type="email" name="email">
  </label>
  <br>
  <button type="submit" onclick="saveData()">提交</button>
</form>

<script>
function saveData() {
  var name = document.getElementsByName("name")[0].value;
  var email = document.getElementsByName("email")[0].value;
  localStorage.setItem("name", name);
  localStorage.setItem("email", email);
}
</script>

在上面的代码中，我们给按钮添加了一个 onclick 事件处理程序。当用户点击按钮时，这个处理程序会执行 saveData 函数。

该函数通过 document.getElementsByName 方法获取姓名和邮箱输入框的值，并使用 localStorage.setItem 方法将这些值保存到本地存储中。

第三步：跳转到另一个页面

最后，我们需要在提交数据后跳转到另一个页面，以便在那个页面中获取保存的数据。这可以通过 window.location.href 属性实现。

<form>
  <label>
    姓名：
    <input type="text" name="name">
  </label>
  <br>
  <label>
    邮箱：
    <input type="email" name="email">
  </label>
  <br>
  <button type="submit" onclick="saveData()">提交</button>
</form>

<script>
function saveData() {
  var name = document.getElementsByName("name")[0].value;
  var email = document.getElementsByName("email")[0].value;
  localStorage.setItem("name", name);
  localStorage.setItem("email", email);
  window.location.href = "https://example.com/anotherpage.html";
}
</script>

在上面的代码中，当 saveData 函数执行完毕后，它将使用 window.location.href 跳转到另一个页面。在另一个页面中，您可以使用 localStorage.getItem 方法获取保存的姓名和邮箱。

总结

本文介绍了如何通过按钮将数据发送到另一个页面。要实现这一功能，我们需要在表单中添加一个按钮和一个 onclick 事件处理程序。处理程序将获取表单中的数据，并使用 localStorage.setItem 方法将其保存到本地存储中。最后，处理程序使用 window.location.href 属性将页面跳转到另一个页面。