时间戳

首页 > 解决方案 > 如何在 javascript 中通过 html 动态调用对象

javascript - 如何在 javascript 中通过 html 动态调用对象

问题描述

我在一个 html 页面中有一个下拉菜单，当我选择这个下拉菜单的一个选项时，我链接href到另一个 html 页面。在这个 html 页面中，我想了解console.log我选择的选项的一些特定细节（细节是 javascript 对象）。

我的问题是我怎样才能动态地做到这一点？为了更清楚地类比，我有一个带有水果的下拉菜单，我选择橙色，我在 orange.html 中引用，在这个页面中我想控制 javascript 对象 fruit.orange 但我希望它不是动态的（只是用 orange.html fruit.orange 写，因为我知道我在 orange.html）

这可行吗？我希望我的问题是明确的而不是模棱两可的

标签： javascripthtmlobject

解决方案

通过单击您需要存储的选项，以便在新页面上您可以找出选择了哪个选项。如果您不想使用允许您将变量从一个视图移动到另一个视图的服务器，那么您可以使用 localStorage 来保存变量。

向 localStorage 添加一些数据就像使用 setItem() 方法一样简单。我将为名称使用通用键和值，但它们可以是任何字符串。

localStorage.setItem('key', 'value')

如果您想获取特定键的值，您将使用 getItem() 方法。

localStorage.getItem('key')

来源：https ://www.taniarascia.com/how-to-use-local-storage-with-javascript/

如果您希望在关闭浏览器后自动删除保存的信息，可以使用sessionStorage代替

sessionStorage 类似于 localStorage；不同之处在于，虽然 localStorage 中的数据不会过期，但 sessionStorage 中的数据会在页面会话结束时被清除。

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

来源：https ://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

推荐阅读