javascript - 如何从本地存储中获取数据并以 Angular 显示在表格中？

Question

我制作了一个登录表单，它获取用户名和密码并将其存储到本地存储中，当单击登录时，它会在不同页面上显示欢迎{用户名}。但它只在本地存储中存储一个用户名。当我们输入另一个用户名时，之前的用户名会被覆盖。我想显示所有用户名。

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() {
  }

}

<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>

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');
    }

}

<p>
  Welcome {{user}}
</p>

<button (click)="onLogout()">Logout</button>

我需要将输入的每个用户名存储在本地存储中，并从该本地存储中检索主页上的用户名。

Answer 1

首先您需要了解如何localStorage作品。本地存储作为键值对工作。您可以通过将不同的用户名保存为不同的键来实现这一点，然后使用所有键获取所需的值。请阅读此内容以获取更多信息:How to Use Local Storage with JavaScript

顺便说一句，不建议将密码保存在本地存储中。