在另一個網頁上從本地存儲中檢索並顯示已保存的數據

Question

我正在做一個有關創建網站的學校項目。 注冊帳戶后，我設法將用戶數據保存到本地存儲中。 我想從本地存儲中檢索保存的用戶數據並將其顯示在編輯配置文件頁面中，這樣，當我加載編輯配置文件頁面時，頁面中已經顯示了一些數據。 例如，在社交媒體帳戶中，只要我們要編輯個人資料，就會顯示我們的當前信息，而我們只是在該頁面上編輯我們的信息。 我該如何實現？

這是我的代碼：

<script>
    var currentUser=null;
    document.addEventListener("DOMContentLoaded",loadUserData);

    function loadUserData() {
        currentUser = localStorage.getItem("currentUser");
        if(currentUser!=null) {
            currentUser = JSON.parse(currentUser);

            console.log(currentUser.username);
            console.log(currentUser.name);
            console.log(currentUser.password);
            console.log(currentUser.email);
        }
    }
</script>

我知道console.log僅顯示控制台中的數據，但是當用戶轉到編輯配置文件頁面時，我需要將數據顯示在文本框中。 以下腳本在用戶名文本框中顯示用戶名是否正確？對我來說不起作用。

<p>
    <label for="newusername">Change Username:</label>
    <input type="text" name="username" onload="valueAsPlaceHolder();"
    id="username" required="required"/>

    <!--<script>
    function valueAsPlaceHolder() {
        var changeUsernameInput = document.getElementById("username");
        localStorage["username"] = changeUsernameInput.value;

        var changeUsernameSetting = localStorage["username"];
        if (changeUsernameSetting == null) {
            changeUsernameInput.value = "";
        }
        else {
            changeUsernameInput.value = changeUsernameSetting;
            }
        }
    </script-->
</p>

Answer 1

您應該像下面那樣修改loadUserData函數。 我已經為用戶名設置了示例，您可以在所有字段（例如名稱，電子郵件和密碼）中遵循該名稱。

function loadUserData() {
    currentUser = localStorage.getItem("currentUser");
    if(currentUser!=null) {
        currentUser = JSON.parse(currentUser);

        document.getElementById('username').value = currentUser.username;
    }
}