Wie bearbeiten und aktualisieren Sie Daten im lokalen Speicher?

Question

Ich habe stundenlang recherchiert und einige Male im Stapelüberlauf gefragt, aber die Antworten haben nicht geholfen oder ich verstehe überhaupt nicht (der Benutzer hat jquery und php als Teil der Lösung benutzt, die ich nicht kenne wie zu benutzen)

Hier sind meine Codes (Current-wird nur angezeigt, wenn Benutzer angemeldet ist)

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

Meine Codes Benutzer als Objekte in einem Array hinzuzufügen, wenn sie für ein Konto anmelden:

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

} 

Wenn ich mich anmelde, w Er sollte mich auf die Seite zum Bearbeiten des Profils leiten und Daten in dem Formular anzeigen, das der Benutzer bei der Anmeldung eingegeben hatte. Was ich jetzt brauche, ist nur die lokalen Speicherdaten zu ändern, indem Sie das Formular ausfüllen. Genauso wie es über das Inspect Element bearbeitet wird, nur dass es über das Profil bearbeiten bearbeitet wird. Wie erreiche ich das?

Bitte helfen Sie mir. Würde schätzen Lösungen ohne jquery/php

Beispiel für lokalen Speicher:

Vor

Bearbeitung

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

Nach der Bearbeitung (durch Seite Profil bearbeiten)

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

Was wäre die korrekte Funktion zu tun?

Ich habe versucht, die folgende Funktion, aber es hat nicht funktioniert:

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

Es ist ziemlich einfach

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; 

das ist ziemlich viel, wie es geht.

EDIT: besseres Beispiel der Verwendung der Funktionen