如何使用 JavaScript 在 HTML 页面之间有效地传递变量？

通过 JavaScript 将变量从一个 HTML 页面传递到另一个 HTML 页面

问题：

您需要在两个 HTML 页面之间传递一个变量使用 JavaScript 的 HTML 页面。变量的值在第一页的文本框中捕获，并且您希望在用户单击按钮后在第二页上访问该值。但是，您在尝试检索第二页上的变量时遇到“未定义”值。

解决方案：

使用 localStorage：

您可以使用 localStorage 来实现此功能，而不是使用不可靠且难以管理的全局变量。 localStorage 是一个浏览器 API，它提供了一种在浏览器本地存储数据的方法，即使在关闭应用程序或浏览器选项卡后也是如此。与 cookie 相比，它具有较大的存储限制。

实现：

1. 第 1 页（保存变量）：

   <code class="javascript">window.onload = function() {
     var getInput = prompt("Hey type something here: ");
     localStorage.setItem("storageName", getInput);
   }</code>

2. 第 2 页（检索变量）：

   <code class="javascript">window.onload = function() {
     alert(localStorage.getItem("storageName"));
   }</code>

说明：

• 在第 1 页，您使用 localStorage.setItem("storageName", getInput) 将文本框中输入的值存储在 localStorage 的 storageName 键中。
• On第 2 页，您使用 localStorage.getItem("storageName") 检索存储在 storageName 键中的值并将其显示在警报框中。

替代方法：

• Cookie： 您也可以使用 Cookie 来传递变量，但它们的存储限制较小，并且会随每个请求发送回服务器，这可能会影响性能和隐私。
• 会话存储：会话存储与 localStorage 类似，但仅持续当前会话，并在用户关闭浏览器选项卡时清除。如果您只需要存储特定会话的数据，则可以使用它。

以上是如何使用 JavaScript 在 HTML 页面之间有效地传递变量？的详细内容。更多信息请关注PHP中文网其他相关文章！