在另一个网页上从本地存储中检索并显示已保存的数据

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;
    }
}