javascript - 如何编辑和更新本地存储中的数据？

Question

我已经研究了几个小时，并在堆栈溢出中询问了很多次，但答案没有帮助或者我根本不理解(用户使用 jquery 和 php 作为解决方案的一部分，但我不这样做知道如何使用)

这是我的代码(当前用户-仅在用户登录时显示)

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

}

当我登录时，它会引导我进入编辑个人资料页面，并以用户注册时输入的形式显示数据。我现在需要的只是通过填写表格来更改本地存储数据。就像通过检查元素编辑它一样，只是通过编辑配置文件表单对其进行编辑。我该如何实现这一目标？

请帮助我。希望没有 jquery/php 的解决方案

本地存储示例:

编辑前

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

编辑后(通过编辑个人资料页面)

{"username":"ben66","name":"ben ong","password":"qwerty","email":"xyz@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;

事情大概就是这样。

编辑:演示函数使用的更好示例