Извлечение и отображение сохраненных данных из локального хранилища на другой веб-странице

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