我正在使用 HTML、JS 和 CSS 构建一个电子应用程序 - 只是一个基本的事情。 我有两个 html 文件(例如 FILE1.html 和 FILE2.html)。
在文件1中，用户提供了他的用户名/密码对，然后将他带到文件2。
我想要做的是在file1中捕获用户的输入(特别是username)并将其显示在file2中。
现在，我可以在一个文件中做到这一点；这是我的代码:
文件1
<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到文件2。
文件2
<form>
<span id="receivedUserName"></span>
</form>
只是想不出一种方法来解决它......
肯定是这条线<h1 id="receivedUserName"></h1> in file1 用于单个文件测试。
预先感谢您。
最佳答案
使用类似于下面的 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 或跨站点脚本。
关于javascript - 在其他文件的 html 标签中显示用户输入 [HTML+JS]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50097274/