在另一个文件 [HTML+JS] 的 html 标签中显示用户输入

Question

我正在使用 HTML、JS 和 CSS 构建一个 Electron 应用程序——这只是一件基本的事情。我有两个 html 文件（比如 FILE1.html 和 FILE2.html）。

在 file1 中，用户提供了他的 username/password 对，然后将他带到 file2。

我想做的是在 file1 中捕获用户的输入（特别是 username）并将其显示在 file2 中.

现在，我可以在一个文件中做到这一点；这是我的代码：

FILE1

<body>
  <input type="text" id="username" /><br>   
    <button onclick="getUserName(); return false;">Continue</button>
  <h1 id="receivedUserName"></h1>
</body>

和JS文件：

const getUserName = () => {
  let userName = document.getElementById('username').value;
  document.getElementById('receivedUserName').innerHTML = userName;
};

在 file1 中一切正常，但我真正需要的是将捕获的 username 传递给 FILE2。

FILE2

<form>
  <span id="receivedUserName"></span>
</form>

就是想不出绕过它的方法... file1 中的 <h1 id="receivedUserName"></h1> 行肯定是用于单个文件测试的。
提前谢谢你。

Answer 1

像下面这样使用 localStorage（我还没有测试过）：

let username = document.getElementById('username').value;
localStorage.setItem('username', username);

然后在另一个文件中：

let username = localStorage.getItem('username');
document.getElementById('receivedUserName').innerText = username;

非常重要的边注： 你必须使用 innerText，而不是 innerHTML 来设置 receivedUserName 元素的内容，以防万一用户名包含 < 或 &。这不仅仅是一种美学上的事情——它会导致应用程序严重崩溃，如果以这种方式将一个用户的数据显示给另一个用户，你就会有一个巨大的安全漏洞，因为他们可能会将恶意脚本放入用户名的脚本标签中. Google XSS 或跨站脚本。

在另一个文件 [HTML+JS] 的 html 标签中显示用户输入

Displaying a user input in an html tag from the other file [HTML+JS]

html

javascript

input

innerhtml

getelementbyid