将用户数据添加到本地存储只能工作一次，之后添加的对象会被简单地覆盖？ （角度 10+）

Posted 2023-03-05

【中文标题】将用户数据添加到本地存储只能工作一次，之后添加的对象会被简单地覆盖？ （角度 10+）

【英文标题】：Adding user data to local storage only works once, thereafter the object being added is simply overwritten? (Angular 10+)

【发布时间】：2021-07-20 18:13:46

【问题描述】：

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

为什么会发生这种情况？

【参考方案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)]