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

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 which I do not know how to use)

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

Here are my codes (currentuser-will only show when user is logged in)

这是我的代码(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);
    }
}

My codes to add users as objects into an array when they sign up for an account:

我的代码在用户注册帐户时将用户添加为数组:

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

}

When I log in, it would direct me to the edit profile page and display data in the form which the user had entered when signing up. What I NEED right now is just to change the local storage data by filling in the form. Just like editing it through the Inspect Element, just that it's being edited through the edit profile form. How do i achieve this?

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

Please help me. Would appreciate solutions without jquery/php

请帮我。会喜欢没有jquery / php的解决方案

Sample of local storage:

本地存储样本:

Before editing

{"username":"alice66","name":"alice tan","password":"123","email":"[e-mail]"}

After editing (through edit profile page)

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

{"username":"ben66","name":"ben ong","password":"qwerty","email":"[e-mail]"} 

What would be the correct function to do so?

这样做的正确功能是什么?

I tried the following function but it did not work:

我尝试了以下功能,但它不起作用:

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

1 个解决方案

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


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;

this is pretty much how it goes.

这几乎就是这样的。

EDIT: better example demonstrating the use of the functions

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