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

【问题标题】：How I can call dynamically an object over html in javascript如何在 javascript 中通过 html 动态调用对象
【发布时间】：2020-04-05 13:41:05
【问题描述】：

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

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

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

【问题讨论】：

一些html+JS代码（不一定是整个项目，也可以是简化的例子）会帮助人们提供答案。
您可以使用window.location.href 来确定您在哪个页面上，而不仅仅是您想要的console.log 对象。

标签： javascript html object

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

在orange.html 上进行 AJAX 调用：

  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）或单 js 文件并获取正确的对象：

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

然后：

let orange = obj.orange

我希望这是有道理的。

【讨论】：