json - 将用户数据添加到本地存储只工作一次，此后被添加的对象被简单地覆盖？ ( Angular 10+)

Question

我有一个接受用户数据的表单。我正在尝试将此输入的用户数据写入我的本地存储。第一个提交按预期添加记录，但是，当尝试添加第二个记录时，第一个记录属性被简单地覆盖 - 请注意，添加了一个数组元素，但它的值只是前一个元素的 ID。

这可以在下面看到:

添加第一个用户(John)后，我的本地存储如下:

添加我的第二个用户 (Alice) 后，我的本地存储现在是:

我正在使用一个界面，用户:

export interface User {
  id : number;
  firstName : string;
  secondName : string;
  title : string;
  email : string;
  userRole : string;
  password : string;
}

添加到本地存储的代码是:

user = {} as User;

onSubmit() {
    console.log(this.addUserForm.value);
    this.user = Object.assign(this.user, this.addUserForm.value);
    this.addUser(this.user);
  }

  addUser(user: any) {
    var users = [];
    if (localStorage.getItem('Users')) {
      users = JSON.parse(localStorage.getItem('Users') || '{}');
      users = [user, ...Object.keys(users)]
    }
    else {
      users = [user]
    }
    localStorage.setItem('Users', JSON.stringify(users));
  }

为什么会发生这种情况？

Answer 1

...Object.keys(users) 只会将数组的键(0、1..)传播到数组。

你应该像这样将新的 user 插入数组:

users.push(user); // or users.unshift(user); if you want it to be the first element

或者如果你想使用传播语法:

users = [user, ...users]

代替

users = [user, ...Object.keys(users)]