事件值未传递到导入的文件

Question

我正在尝试将事件中的innerHTML 从一个js 文件传递​​到位于不同html 页面上的另一个js 文件。本质上，我正在尝试创建您在网站上看到的站点位置。 home 或 home>首页后的其他页面。

我最初的 html 有大约六个链接。它们都会访问不同的页面，这些页面的结构完全相同，但名称不同，并且其中包含不同的信息。因此，我尝试对所有这些页面使用相同的 html，而不必制作六个不同的 html 页面。

所以我所做的就是创建一个事件侦听器来捕获您所在的任何链接的单词。我已将其记录到控制台并且工作正常。这是该网站的主页。网站的下一个层是这六个页面之一，它们看起来都一样。

我希望页面显示 home > page1 或 home>当您单击六个链接之一时，下一页上的 page2 ，我希望 page1/page2 值成为我从这个事件监听器获得的值。

我不知道这是否是解决此类问题的实用方法，但这是我想到的第一个想法。我让事件监听器将其值传递给一个对象，然后将该对象导入到另一个 html 链接到的另一个 js 文件中。

问题是，当我进入下一页时，对象属性 {name: e.target.innerHTML} 不再具有值，因为在该页面 e.target 的上下文中.innerHTML 不再有任何意义了。或者至少我认为这就是问题所在。

这是脚本。

choose-forum.js

let forum = document.querySelector('.column');

export let forumInfo  = {
    name: ""
};

const getForumName = (e) => {
    forumInfo.name = e.target.innerHTML;
    console.log(forumInfo.name);
}

forum.addEventListener('mouseover', getForumName);

page2.js

import { forumInfo } from "./choose-forum.js";

let forumNav = document.querySelector('.forumNav');

const onLoad = () => {
 forumNav.innerHTML = forumInfo.name;
}

window.addEventListener('load', onLoad);

日志记录 forumInfo.name 说

未捕获的类型错误：无法读取 null 的属性（读取“addEventListener”。

我假设这是因为 forumInfo.name 等于由另一个文件上的侦听器触发的事件目标。

任何人都知道解决这个问题的方法吗？我也考虑过让位置栏成为一个反应组件，但我最近才开始使用反应，我还没有学习路线或如何使用反应将信息传递到不同的页面，所以我想我会看到如果我能我自己想出一些办法。

Answer 1

我想通了。我关于它为什么不起作用的想法是正确的。 HTML 是无状态的。在尝试了大量极其复杂的事情以使其正常工作之后，我发现了这些称为前端存储的漂亮东西，哈哈。我只需在谷歌中重新表述我的问题，不要提及导入和导出，因为该解决方案与导入和导出没有任何关系。

---

编辑：

所以基本上我只是将鼠标悬停事件目标生成的值存储在本地存储中。这允许我在另一个 html 文件中访问它的值，而无需使用导入和导出，导入和导出不会保留其他页面的事件信息。鼠标悬停时会获取其悬停的内容的innerHTML 值，并将该值存储在本地存储中，然后我将下一个html 页面中的站点位置栏设置为另一个js 文件中的该值。如果您只是将 URL 放入搜索栏中而不是单击它，这会导致问题，因为本地存储中没有设置任何内容。或者，当您导航到本地存储时，本地存储可能设置了错误的值。所以我找到了另一种不需要本地存储的方法。我只是将 html 中的所有 href 值放入“/whatever”，然后为该路径创建一个 get 路由，该路径发送我拥有的 html 文件，作为所有这些页面的模板。然后，我根据 window.location 更改页面顶部的站点位置栏，方法是进行一些操作并在 local:host5000 之后提取我需要的部分，并将值设置为该值。