title: Adding user data to local storage only works once, thereafter the object being added is simply overwritten? (Angular 10+)
body: <p>I have a form which takes in user data. I am trying to write this inputted user data to my local storage. The first submit adds the record as expected, however, when trying to add a second record, the first records attributes are simply overwritten - do note, an array element is added, however its value is simply the id of the previous element.</p>
  <p>This can be seen below:</p>
  <p>After adding the first user (John), my local storage is as follows:
  <a href="https://i.stack.imgur.com/Plx6e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Plx6e.jpg" alt="enter image description here" /></a></p>
  <p>After adding my second user (Alice), my local storage is now:
  <a href="https://i.stack.imgur.com/0h2Yk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0h2Yk.jpg" alt="enter image description here" /></a></p>
  <p>I am using an interface, User:</p>
  <pre><code>export interface User {
    id : number;
    firstName : string;
    secondName : string;
    title : string;
    email : string;
    userRole : string;
    password : string;
  }
  </code></pre>
  <p>The code for adding to the local storage is:</p>
  <pre><code>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));
    }
  </code></pre>
  <p>Any reason as to why this may be happening?</p>