javascript - ¿Cómo puedo almacenar un objeto en el almacenamiento local en Angular?

Tengo un objeto llamado model y quiero almacenarlo en localStorage.

model.username y model.password son dos campos de mi formulario. quiero almacenar model.username en el almacenamiento local. necesito agregar cada nombre de usuario para que se agregue en el almacenamiento local. Pero en mi caso, cada vez que intento ingresar un nuevo nombre de usuario, el nombre de usuario anterior se sobrescribe en el almacenamiento local, es decir, solo se almacena un nombre de usuario en el almacenamiento local en cualquier momento.

A continuación se muestra la plantilla de inicio de sesión

<form  (ngSubmit)="f.valid && onSubmit(f) " #f="ngForm" novalidate>
  <div>
  <label for="username">Username</label>
          <input type="text"  name="username" [(ngModel)]="model.username" #username="ngModel" required appForbiddenName="jimit" />
          <div *ngIf="f.submitted && !username.valid" >Username is required</div>
          <div *ngIf="username.errors.forbiddenName">
            Username has already taken.
          </div>

  </div>
  <div>
    <label for="password">Password</label>
          <input type="password"  name="password" [(ngModel)]="model.password" #password="ngModel" required />
          <div *ngIf="f.submitted && !password.valid">Password is required</div>
  </div>      
  <div>    
         <button type="submit" >Login</button></div>

  <div>
    <button type="reset">Clear</button>
  </div>

  </form>

  <button (click)="onRegister()">Register</button>

A continuación se muestra el componente de inicio de sesión

import { Component, OnInit } from '@angular/core';
import { FormBuilder, NgForm } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private router: Router) {
    }

 model: any = {};

onSubmit(form: NgForm) {

  console.log(form.value.username);
  console.log(this.model.username);
  localStorage.setItem ('username', this.model.username);
  this.router.navigate(['/home']);
}

onRegister() {
  this.router.navigate(['/register']);
  window.alert('please wait while we process your request');
}


  ngOnInit() {
  }

Respuesta #1

Ignorando la extraña idea de almacenar múltiples nombres de usuario en localStorage, puedes hacer esto insertando un arreglo o un objeto. Debido a que las claves de localStorage son únicas:

const usernames = JSON.parse(localStorage.getItem('usernames') || '[]');

if (!usernames.includes(this.model.username)) {
  usernames.push(this.model.username);
  localStorage.setItem('usernames', JSON.stringify(usernames));
}

Sin embargo, si estás haciendo esto para obtener los datos más tarde después de navegar, te sugiero que leas detenidamente sobre el uso de servicios/store en lugar de localStorage.