json - การเพิ่มข้อมูลผู้ใช้ลงใน local storage ใช้ได้เพียงครั้งเดียว หลังจากนั้นวัตถุที่เพิ่มจะถูกเขียนทับอย่างง่ายๆ? (Angular 10+)

ฉันมีแบบฟอร์มที่รับข้อมูลผู้ใช้ ฉันพยายามเขียนข้อมูลผู้ใช้ที่ป้อนลงในพื้นที่เก็บข้อมูลภายในเครื่องของฉัน การส่งครั้งแรกจะเพิ่มระเบียนตามที่คาดไว้ แต่เมื่อพยายามเพิ่มระเบียนที่สอง คุณสมบัติของระเบียนแรกจะถูกเขียนทับ - โปรดทราบว่าจะมีการเพิ่มองค์ประกอบในอาร์เรย์ แต่ค่าของมันเป็นเพียงรหัสขององค์ประกอบก่อนหน้าเท่านั้น

สิ่งนี้สามารถเห็นได้ด้านล่าง:

หลังจากเพิ่มผู้ใช้คนแรก (จอห์น) การจัดเก็บข้อมูลในเครื่องของฉันเป็นดังนี้:

หลังจากเพิ่มผู้ใช้คนที่สองของฉัน (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

หรือถ้าคุณต้องการใช้ไวยากรณ์ spread:

users = [user, ...users]

แทนที่จะ

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