如何從一個 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>

在回答您的第一個問題時，您只需一頁即可完成。 例如，閱讀單頁應用程序。

請注意，您執行此操作的方式與“提交”表單不同。