如何在 JavaScript 中在 HTML 页面之间传递具有范围限制的变量？

在 HTML 页面之间传递 JavaScript 变量

尝试将变量从一个 HTML 页面（第 1 页）传递到另一个 HTML 页面时遇到问题另一个（第 2 页）使用 JavaScript。尽管您努力声明全局变量，但该值在第 2 页上仍然未定义。本文旨在通过探索 JavaScript 变量的局限性并提供替代方法来提供此问题的解决方案。

理解JavaScript 变量作用域

JavaScript 变量具有特定的作用域，它决定了可以访问它们的代码部分。您提供的代码在任何函数之外声明了一个变量价格，试图使其成为全局变量。但是，JavaScript 只能识别在 HTML 文档开头的脚本标记中使用 var 关键字全局声明的变量。

使用 LocalStorage 进行跨页面通信

相反除了依赖全局变量之外，跨页面通信更稳健的方法是使用 LocalStorage。 LocalStorage 允许您存储即使刷新页面或关闭浏览器也能保留的键值对。

第 1 页代码：

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

第 2 页代码：

<code class="html"><script type="text/javascript">
window.onload = function() {
   alert(localStorage.getItem("storedPrice"));
}
</script></code>

此方法将输入的值存储在第 1 页的 LocalStorage 中，并在页面加载时在第 2 页上检索它。 LocalStorage 受到现代浏览器的支持，并为跨页面通信提供了可靠的机制。

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