How To Edit And Update Data In Local Storage?

I've been researching for hours and asked a number of times in stack overflow, but the answers did not help or I don't understand at all (user made use of jquery and php as part of

Solution 1:

It is rather simple

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/>


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

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

this is pretty much how it goes.

EDIT: better example demonstrating the use of the functions