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

使用 JavaScript 在 HTML 页面之间传递变量

在 Web 开发中，经常需要在两个 HTML 页面之间传输数据。一种常见的方法是使用 JavaScript 将数据存储在全局变量中并在第二页上检索它。但是，如果未正确声明或访问全局变量，此方法可能会遇到问题。

考虑以下场景：

• 您有两个页面，“第 1 页”和“第 1 页” 2"。
• 在第 1 页上，文本框包含一个值（例如 100）。
• 单击按钮后，JavaScript 会将文本框值保存在全局变量中并重定向到页面 2。
• 在第 2 页上，onload 函数尝试检索并显示第 1 页上存储的值。

但是，onload 函数始终为全局变量返回“未定义”。

使用本地存储的解决方案

要解决此问题，另一种方法是使用 localStorage。本地存储提供了一种更可靠、更安全的方式来存储和检索数据。

• 第 1 页：

  使用以下命令将文本框值存储在 localStorage 中setItem() 方法，如下所示：

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

• 第 2 页：

  使用 getItem( 从 localStorage 检索存储的值) 方法并使用alert()显示，如下所示：

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

通过使用localStorage，可以保证不同HTML页面之间数据存储和检索的一致性。这种方法既可靠又高效。

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