他のウェブページのローカルストレージからの保存データの取得AND表示

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