gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 01:59:38 26 4
gpt4 key购买 nike

我正在使用 HTML、JS 和 CSS 构建一个电子应用程序 - 只是一个基本的事情。我有两个 html 文件(例如 FILE1.htmlFILE2.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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com