如何将对象数组中的数据存储在本地存储中？

Question

我已经使用 javascript 制作了一个注册表单，我想从这里将用户数据存储到本地存储中的对象数组中。我确实喜欢这个- localStorage.setItem("key_users", JSON.stringify(users));但数据没有被存储。以下是我的 controller.js-

var users = [];
localStorage.setItem("key_users", JSON.stringify(users));
//var obj = JSON.parse(sessionStorage.users);
var idInput  = makeCounter();
var firstnameInput   = document.getElementById("firstname");
var lastnameInput = document.getElementById("lastname");
var emailInput  = document.getElementById("email");
var usernameInput   = document.getElementById("username");
var passwordInput = document.getElementById("password");
var messageBox  = document.getElementById("display");
//document.getElementById("para").value=users[0].username;

 //inputtext.innerHTML += users[0].firstname + "<br/>";

function userdetails(id, firstname, lastname, email, username, password){

this.id= id;
this.firstname= firstname;
this.lastname= lastname;
this.email= email;
this.username= username;
this.password=password;
this.FullName=this.firstname +' ' + this.lastname;
}

/* users.prototype.fullName = function () {
    return this.firstname + " " + this.lastname;
} */

//Counter to increment id
function makeCounter() {
    var arraylength=users.length;
    return function(){
        return i++;
    }
    /* var i = 0;
    return function() {
        return i++;
    } */
}
//var id = makeCounter();

function insert()
{
     var x = document.forms["myform"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        alert("Not a valid e-mail address");
        return false;
    }
    var y = document.forms["myform"]["username"].value;
    var z = document.forms["myform"]["password"].value;
    var ulen= users.length;
for(i=0; i < ulen; i++)
{
if ( y == users[i].username && z == users[i].password){
    alert("User already exists");
    return false;
  }
}
    var user=new userdetails(idInput(),firstnameInput.value, lastnameInput.value, emailInput.value, usernameInput.value, passwordInput.value);
    users.push(user);
    alert("Registered successfully");

    // Clear the fields
  firstnameInput.value = "";
  lastnameInput.value = "";
  emailInput.value = "";
  usernameInput.value = "";
  passwordInput.value = "";
}

function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var ulen= users.length;
for(i=0; i < ulen; i++)
{
if ( username == users[i].username && password == users[i].password){
    alert("Logged in successfully");
  }
  messageBox.innerHTML = "Welcome,  " +users[i].firstname+ "  here are your details: " + "</br>";
  messageBox.innerHTML += "Name: " + users[i].firstname + "<br/>";
  messageBox.innerHTML += "UserName: " + users[i].username + "<br/>";
  messageBox.innerHTML += "EmailId: " + users[i].email + "<br/>";
 // messageBox.innerHTML += "FullName: " + userdetails.fullName() + "<br/>";
}
}

function editFirstname() {
    var username = document.getElementById("username1").value;
var firstnameip = document.getElementById("firstname1").value;
var userlen= users.length;
for(i=0; i < userlen; i++)
{
if ( username == users[i].username){
    if(firstnameip == "" || firstnameip == null)
    alert("name cant be blank");
else
    users[i].firstname = firstnameip;
    alert("firstname updated");
  }else{
      alert("Put your username to authenticate");
  }
}
}
function editLastname() {
    var username = document.getElementById("username1").value;
var lastnameip = document.getElementById("lastname1").value;
var userlen= users.length;
for(i=0; i < userlen; i++)
{
if ( username == users[i].username){
    if(lastnameip == "" || lastnameip == null)
    alert("name cant be blank");
else
    users[i].lastname = lastnameip;
    alert("lastname updated");
  }else{
      alert("Put your username to authenticate");
  }
}
}

function editEmail() {
    var username = document.getElementById("username1").value;
var emailip = document.getElementById("email1").value;
var userlen= users.length;
for(i=0; i < userlen; i++)
{
if ( username == users[i].username){
    if(emailip == "" || emailip == null)
    alert("name cant be blank");
else
    users[i].email = emailip;
    alert("email updated");
  }else{
      alert("Put your username to authenticate");
  }
}
}

function editPassword() {
    var username = document.getElementById("username1").value;
var passwordip = document.getElementById("password").value;
var userlen= users.length;
for(i=0; i < userlen; i++)
{
if ( username == users[i].username){
    if(passwordip == "" || passwordip == null)
    alert("name cant be blank");
else
    users[i].password = passwordip;
    alert("password updated");
  }else{
      alert("Put your username to authenticate");
  }
}
}

Answer 1

实际上，您正在向 localStorage 发送一个空数组。尝试移动

localStorage.setItem("key_users", JSON.stringify(users));

在脚本的最后，当users数组里面有一些内容时。

Answer 2

您正在存储空的用户数组。移动

localStorage.setItem("key_users", JSON.stringify(users));

低于

alert("Registered successfully");

如何将对象数组中的数据存储在本地存储中？

How to store data from array of objects in local storage?

javascript

session-storage

local-storage