将用户数据添加到本地存储只工作一次，此后被添加的对象被简单地覆盖？ (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)]

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

Adding user data to local storage only works once, thereafter the object being added is simply overwritten? (Angular 10+)

json

local-storage

typescript

angular