ローカルストレージのデータを編集および更新する方法は？

Question

私は何時間も研究していて、スタックオーバーフローで何回も尋ねましたが、答えが役に立たなかった、あるいはわかりません（ユーザーが私が知らないソリューションの一部としてjqueryとphpを使用しましたここで

）を使用する方法私のコード（ユーザーがログインしているとき、あるCurrentUserが-ますのみ表示する）彼らはアカウントにサインアップするとき、配列にオブジェクトとしてユーザーを追加する

var currentUser=userList; 
document.addEventListener("DOMContentLoaded",loadUserData); 

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

document.getElementById('username').value = currentUser.username; 
document.getElementById('name').value = currentUser.name; 
document.getElementById('password').value = currentUser.password; 
document.getElementById('email').value = currentUser.email; 




console.log(currentUser.username); 
console.log(currentUser.name); 
console.log(currentUser.password); 
console.log(currentUser.email); 
    } 
} 

私のコードです：

は、

var userList; 

document.addEventListener("DOMContentLoaded", loadUserList); 

function loadUserList(){ 
    if(localStorage.getItem("userList")===null) { 
     userList = [] ; 
    } else { 
     userList = JSON.parse(localStorage.getItem('userList')); 
    } 

} 
function saveUserToStorage(){ 


var u=document.getElementById("username").value; 
var n=document.getElementById("name").value; 
var p=document.getElementById("password").value; 
var e=document.getElementById("email").value; 

var user={"username":u,"name":n,"password":p,"email":e}; 
localStorage["user"]=JSON.stringify(user); 
userList.push(user); 
localStorage.setItem('userList',JSON.stringify(userList)); 

} 

ログインすると、 ouldはプロファイルの編集ページに移動し、サインアップ時にユーザーが入力したフォームでデータを表示します。 私が今必要とするのは、フォームに記入してローカルストレージデータを変更するだけです。 Inspect Elementで編集するのと同じように、Edit Profileフォームで編集しているだけです。どのように私はこれを達成するのですか？

私を助けてください。 jqueryの/ PHPずにローカルストレージの

サンプルソリューションをお願い申し上げ：

{"username":"ben66","name":"ben ong","password":"qwerty","email":"xyz@mail.com"} 

（編集プロフィールページを介して）編集した後

{"username":"alice66","name":"alice tan","password":"123","email":"abc@mail.com"} 

を編集する前にすることは正しい関数であるものそうするために？

私は、次の機能を試してみましたが、それはうまくいきませんでした：

var updatedUser=currentUser; 
document.addEventListener("DOMContentLoaded",saveChanges); 
function saveChanges() { 
updatedUser = localStorage.getItem("updatedUser"); 
updatedUser = JSON.parse(updatedUser); 
var u = document.getElementById("username").value = updatedUser.username; 
var n = document.getElementById("name").value = updatedUser.name; 
var p1 = document.getElementById("password1").value = updatedUSer.password1; 
var p2 = document.getElementById("password2").value = updatedUser.password2; 
var e = document.getElementById("email").value = updatedUser.email; 

updatedUser={"username":u,"name":n,"password1":p1,"password2":p2,"email":e}; 
updatedUser.push(updatedUser); 
localStorage.setItem('updatedUser',JSON.stringify(updatedUser)); 
} 

Answer 1

これは、それがどのようになる、かなりある

https://jsfiddle.net/ft3ur0cw/5/

<input placeholder="name" id="name"><br/> 
<input placeholder="nausernameme" id="username"><br/> 
<input placeholder="password" id="password"><br/> 
<input placeholder="email" id="email"><br/><br/> 
<button id="save" >save</button> 
<br/><br/> 
<input placeholder="name_saved" id="name_saved"><br/> 
<input placeholder="nausernameme_saved" id="username_saved"><br/> 
<input placeholder="password_saved" id="password_saved"><br/> 
<input placeholder="email_saved" id="email_saved"><br/><br/> 


function load_user(){ 
    var userdata = localStorage.getItem("userdata"); 
    if(typeof userdata === undefined || userdata === null){ 
    userdata = JSON.stringify({username:"",name:"",password:"",email:""}); 
    localStorage.setItem("userdata",userdata); 
    } 
    return JSON.parse(userdata); 
} 

function save_user(username , name, password, email){ 
    userdata = JSON.stringify({username:username,name:name,password:password,email:email}); 
    localStorage.setItem("userdata",userdata); 
     return userdata; 
} 

document.getElementById('save').addEventListener("click",function(){ 
    save_user(
    document.getElementById('username').value, 
    document.getElementById('name').value, 
    document.getElementById('password').value, 
    document.getElementById('email').value 
    ); 
    userdata = load_user(); 
    document.getElementById('username_saved').value = userdata.username; 
    document.getElementById('name_saved').value = userdata.name; 
    document.getElementById('password_saved').value = userdata.password; 
    document.getElementById('email_saved').value = userdata.email; 
}); 

userdata = load_user(); 
    document.getElementById('username_saved').value = userdata.username; 
    document.getElementById('name_saved').value = userdata.name; 
    document.getElementById('password_saved').value = userdata.password; 
    document.getElementById('email_saved').value = userdata.email; 

かなり単純です。

EDIT：