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

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

1 个答案: