如何从一个 html 表单中获取数据并将其显示在另一个表单上？

Question

我只使用 JS，我想从一个 html 获取用户名并将其显示在另一个 html 页面上。 我是编程初学者，我有两个问题：

• 我可以只使用一个 JS 文件来执行此操作吗？ 如果是，如何？

• 为什么它不起作用？

第一页

    <main>
        <form action="">
           <input type="text" name="login" id="login" class="login" placeholder="Login">
           <a href="password.html" id='logar'>LOGAR!</a>
        </form>
        <span id='spanlogin'></span>
    </main>
    <script src="main.js"></script>

var login = document.getElementById('login').value;

localStorage.setItem("thelogin", login);

第二页

    <main>
        <div>
            <span id='showlogin'></span>
        </div>
        <div class="senha">
        </div>
    </main>
    <script src="second.js"></script>

var ologin = localStorage.getItem('thelogin');

function showthelogin(){
    document.getElementById('showlogin').innerHTML = ologin
}

window.onload = showthelogin()

谢谢您的帮助！

Answer 1

“对于从文件加载的文档：URL（即直接从用户的本地文件系统在浏览器中打开的文件，而不是从 web 服务器提供的文件），对本地存储行为的要求是未定义的，并且可能因不同的浏览器而异。

在所有当前浏览器中，localStorage 似乎为每个文件返回不同的 object：URL。 换句话说，每个文件：URL 似乎都有自己独特的本地存储区域。 但是不能保证这种行为，所以你不应该依赖它，因为如上所述，对 file: URLs 的要求仍未定义。”

它来自 developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

值得一提的是，登录按钮只是一个链接，它并没有在第一页运行 js。 当表单仍然为空时，js 在页面加载时立即执行。 如果您将其包装在 function 中并在单击时调用 function，它将执行您想要的操作。

你想要的，可能不是你需要的，但是让事情做我们想让他们做的事情可以帮助我们更好地理解我们需要什么。

main.js

function savePassword(){
    var login = document.getElementById('login').value;
    localStorage.setItem("thelogin", login);    
}

第一页：

<a href="password.html" id='logar' onclick="savePassword()">LOGAR!</a>

在回答您的第一个问题时，您只需一页即可完成。 例如，阅读单页应用程序。

请注意，您执行此操作的方式与“提交”表单不同。