title: How to take data from local storage and to show in table in angular?
body: <p>I have made a login form which take username and password and store it into local storage and when clicked on login it shows welcome {username} on different page.But it only stores one username in localstorage. when we enter another username the previous get overwrite. i want to display all the usernames. </p>
  
  <pre><code>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() {
    }
  
  }
  </code></pre>
  
  <pre><code>&lt;form  (ngSubmit)="f.valid &amp;&amp; onSubmit(f) " #f="ngForm" novalidate&gt;
    &lt;div&gt;
    &lt;label for="username"&gt;Username&lt;/label&gt;
            &lt;input type="text"  name="username" [(ngModel)]="model.username" #username="ngModel" required appForbiddenName="jimit" /&gt;
            &lt;div *ngIf="f.submitted &amp;&amp; !username.valid" &gt;Username is required&lt;/div&gt;
            &lt;div *ngIf="username.errors.forbiddenName"&gt;
              Username has already taken.
            &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="password"&gt;Password&lt;/label&gt;
            &lt;input type="password"  name="password" [(ngModel)]="model.password" #password="ngModel" required /&gt;
            &lt;div *ngIf="f.submitted &amp;&amp; !password.valid"&gt;Password is required&lt;/div&gt;
    &lt;/div&gt;      
    &lt;div&gt;    
           &lt;button type="submit" &gt;Login&lt;/button&gt;&lt;/div&gt;
  
    &lt;div&gt;
      &lt;button type="reset"&gt;Clear&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;/form&gt;
  
    &lt;button (click)="onRegister()"&gt;Register&lt;/button&gt;
  
  </code></pre>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-home-page',
    templateUrl: './home-page.component.html',
    styleUrls: ['./home-page.component.css']
  })
  export class HomePageComponent implements OnInit {
  user;
  
    constructor(private router: Router) { }
  
    onLogout() {
      this.router.navigate(['']);
      // localStorage.clear();
      alert('you will be loged out');
    }
  
    ngOnInit() {
      this.user = localStorage.getItem('username');
      }
  
  }
  
  
  </code></pre>
  
  <pre><code>&lt;p&gt;
    Welcome {{user}}
  &lt;/p&gt;
  
  &lt;button (click)="onLogout()"&gt;Logout&lt;/button&gt;
  
  </code></pre>
  
  <p>I need to store each and every username entered to be stored in localstorage and to retrieve that usernames on home-page from that localstorage.</p>