如何在 JavaScript 中的 HTML 页面之间共享数据：使用 window.onload 和 localStorage 传输变量

JavaScript 中 HTML 页面之间传递变量

在涉及多个 HTML 页面的场景中，经常需要将变量从一个页面传递到另一个页面。为了应对这一挑战，本文将探讨两种方法：window.onload 和 localStorage，提供页面间共享数据的全面解决方案。

后台

提供的代码包括两个函数：save_price() 和 read_price()，其目标是在全局变量中存储和检索用户输入值。然而，在第 2 页使用全局变量 Price 时出现了问题，由于 JavaScript 中缺乏全局作用域，它返回“未定义”。

使用 window.onload 的解决方案

使用window.onload的困难在于尝试的函数调用不正确。正确的格式应该是：

window.onload = function() {
  read_price();
};

此解决方案虽然有效，但具有一定的局限性。全局变量会给维护和代码可读性带来挑战，尤其是在大型应用程序中。

使用 localStorage 的替代解决方案

localStorage 提供了一种更安全、更高效的数据传输方法无需全局变量的页面。此机制允许存储在页面重新加载和浏览器会话中持续存在的键值对。

代码实现

第 1 页：

window.onload = function() {
  var getInput = prompt("Enter a value: ");
  localStorage.setItem("value", getInput);
};

第 2 页：

window.onload = function() {
  alert(localStorage.getItem("value"));
};

localStorage 的好处

• 持久存储： 即使关闭并重新打开浏览器后，数据仍然可以访问。
• 巨大的存储容量： 与 cookie 不同，允许存储大量数据。
• 服务器端避免： 与 cookie 不同，每次请求时数据不会发送回服务器。

结论

window.onload 和localStorage 提供了在页面之间传输变量的方法，localStorage 由于其广泛的优点和易用性而成为首选解决方案。通过利用 localStorage 的强大功能，开发者可以高效地跨页面共享数据，增强用户体验并简化开发流程。

以上是如何在 JavaScript 中的 HTML 页面之间共享数据：使用 window.onload 和 localStorage 传输变量的详细内容。更多信息请关注PHP中文网其他相关文章！