Question

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

在 file1 中，用户提供了他的用户名/密码对，然后将他带到 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来设置<元素的内容{1}}或&。这不仅仅是一种审美的东西 - 它会导致应用程序崩溃，如果以这种方式将数据从一个用户显示给另一个用户，则会有一个巨大的安全漏洞，因为他们可能会将恶意脚本放在用户名的脚本标记中。 Google XSS或跨站点脚本。

在其他文件的HTML标签中显示用户输入[HTML + JS]

1 个答案: