Question

我正在尝试进行HTML和JS注册，以将登录详细信息存储在LocalStorage中。我有一个带有2个参数的类，其中一个是密码。

然后我有一个函数，它将通过该类创建一个对象并将其存储在本地存储中。

我需要对象的名称是用户名（input id="username_r"）。

我的问题是，例如，当我执行console.log(user1)时，输出为[object Object]

class user {
  constructor(status, password) {
    this.status = status;
    this.password = password;
  }
}

function signup() {
  pw = document.getElementById("password_r").value;
  window[document.getElementById("username_r").value] = new user("active", pw);
  localStorage.setItem(document.getElementById("username_r").value, window[document.getElementById("username_r").value]);
}

<div class="form">
  <input type="text" name="username" id="username_r" placeholder="Utilizador" required>
  <br>
  <br>
  <input type="password" name="password" id="password_r" placeholder="Password" required>
  <br>
  <br>
  <button id="registar" onclick="signup()">Criar Conta!</button>
</div>

Answer 1

如果您想坚持使用类，那么您可以做的是重写toString()方法以创建元素的json形式。您可以将其存储在localStorage中。然后，当您再次需要类实例时，您将不得不解析json并从数据中再次创建元素。为了集中该逻辑，您可以在也执行该逻辑的类上创建一个静态方法。

class user {
  constructor(status, password) {
    this.status = status;
    this.password = password;
  }
  
  static build(json) {
    var temp = JSON.parse(json);
    return new user(temp.status, temp.password);
  }
  
  toString() {
    return JSON.stringify({
      status: this.status,
      password: this.password
    });
  }
}

var user1 = new user('admin', 'nimda');
// force the usage of the `toString` method for show
console.log('My user: '+ user1);

var storedString = user1.toString();
console.log(storedString);

// use a static method to re-build the instance
var user2 = user.build(storedString);
console.log(user2);

Answer 2

我放置了一些示例字符串值，并仅存储stringified对象。然后获取密钥并进行解析。工作正常。

class user {
  constructor(status, password) {
    this.status = status;
    this.password = password;
  }
}

function signup() {
  pw = "myPwd";
  window["user"] = new user("active", pw);
  console.log(window["user"]);
  localStorage.setItem("user",JSON.stringify(window["user"]) ); //Stringygy the object
};

signup();


 var x = localStorage.getItem("user");
 var myUser = JSON.parse(x); //This will give you the data of window['user']

将对象存储在本地存储JS中

2 个答案: