如何使用相同的 script.js 从另一个页面 html 获取数据？答案

【问题标题】：How to get data from another page html using the same script.js?如何使用相同的 script.js 从另一个页面 html 获取数据？
【发布时间】：2022-01-26 19:23:51
【问题描述】：

我真的在为此苦苦挣扎，我正在使用 fetch 从其他 api 国家/地区获取数据，并在 index.html 中显示一些国家/地区。我的情况是，当我单击一个国家/地区时，我想移动到 detail.html 并显示来自我单击的国家/地区的更多数据。我不知道该如何处理。我尝试在 detail.html 中使用相同的 script.js，并希望从 addEventListener 中获取 e.target，但结果代码发生冲突。如果我在 index.html 中创建一个模式会容易得多，但我不想这样做，而是想移动到不同的页面并提高我的技能。在这种情况下我应该使用后端吗？

如果您想查看预览网站或此处的代码是链接site、code

【问题讨论】：

详细数据的来源是什么？另一个 api 获取请求？
我认为你可以使用 myStorage = window.localStorage;
在移动到details.html之前，你可以设置选择哪个，你可以在details.html上获取它，然后调用api，并显示详细信息。
@charlietfl 是的，点击国家，按名称或数据集再次获取，然后详细显示。html
因此，您可以尝试一个简单的方法是在 url 中传递一个标识符作为搜索参数。然后，当您加载 detail.html 页面时，从 url 中读取并使用它来发出新的 fetch 请求。类似/detail.html?countryId=1357

标签： javascript html api fetch

【解决方案1】：

您可以将所选国家/地区存储在窗口对象或任何全局变量中。然后在详细信息页面上，使用该国家/地区的详细信息进行显示。

【讨论】：

每个页面都有自己的窗口，对其他页面的窗口一无所知
这是一个单页应用，它可以共享所有页面的窗口对象
OP 没有提到 SPA，尽管这会有所帮助
我在源代码中看到的就是 spa
@charlietfl 但是如何在 detail.html 中处理崩溃代码？

【解决方案2】：

您可以使用本地存储来存储选定的国家/地区名称。例如

localStorage.setItem("Country", "Afghanistan");

并像这样在您的 detail.html 页面中获取国家/地区名称。

var country=localStorage.getItem("Country");

然后只需将请求发送到 API 以获取有关该特定国家（阿富汗）的数据并将其显示在您的 detail.html 页面中。

【讨论】：