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

Question

我在一个 html 页面中有一个下拉菜单，当我选择这个下拉菜单的一个选项时，我链接href到另一个 html 页面。在这个 html 页面中，我想了解console.log我选择的选项的一些特定细节（细节是 javascript 对象）。我的问题是我怎样才能动态地做到这一点？为了更清楚地类比，我有一个带有水果的下拉菜单，我选择橙色，我在 orange.html 中引用，在这个页面中我想控制 javascript 对象 fruit.orange 但我希望它不是动态的（只是用 orange.html fruit.orange 写，因为我知道我在 orange.html）这可行吗？我希望我的问题是明确的而不是模棱两可的

Answer 1

根据对象的复杂程度，通过表单传递它很笨拙，这将使您可以选择通过本地存储存储它，或者通过 AJAX 获取它。我会选择后者，但这基本上意味着做你说你不想做的事情，即识别orange.html页面的某些内容并进行调用。更清楚地说，这就像我会做的那样：

在进行orange.htmlAJAX 调用时：

  let xhttp = new XMLHttpRequest()

  xhttp.onreadystatechange = () => {

      if(this.readyState == 4 && this.status == 200) {

          let obj = this.responseText;

      }

  }

  xhttp.open("GET", "orange.js", true)

  xhttp.send()

当然，如果每个下拉菜单都有单独的页面（例如 apple.html、orange.html 等），您可以在每个页面上硬编码正确的对象，但是使用 AJAX，您可以通过将单个页面作为表单来使您的代码更干燥提交并根据下拉列表的值，调用单独的 AJAX 文件（例如 orange.js、apple.js）或 sinle js 文件并获取正确的对象：

xhttp.open("GET", "fruit.js", true)

然后：

let orange = obj.orange

我希望这是有道理的。

Answer 2

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