Angular 应用程序 - 静态列表在刷新时清空

Question

我正在尝试使用 Angular 制作一个登录页面。我有一个处理此功能的 Angular 组件（html、css 和 ts 文件）。在 HTML 中，有两个字段和两个按钮。用户名、密码、登录和注册。如果您输入不熟悉的用户名和密码并单击注册，我希望 TS 组件将此用户（带密码）添加到有效组合列表中。如果我用我的硬编码用户（迈克尔）登录，它工作正常。如果我注册一个用户并立即登录，它也可以。但是当我注册一个用户并刷新页面时，新注册的用户从列表（用户）中消失了。HTML:<div *ngIf="loggedin === false">  <label for="username">Name</label>  <input id=username [(ngModel)]="username" type="text">  <label for="password">Password</label>  <input id=password [(ngModel)]="password" type="password">  <button type="submit" (click)="login(username,password)">Login</button>  <div class="snackbar">   <button (click)="register(username,password)">Register</button>  </div></div>TS:import {Component, OnInit, ViewEncapsulation} from '@angular/core';import {MatSnackBar} from '@angular/material/snack-bar';export class User {  username:string;  password:string;  constructor(username, password){    this.username = username;    this.password = password;  }}@Component({  selector: 'app-login',  templateUrl: './login.component.html',  styleUrls: ['./login.component.css'],  encapsulation: ViewEncapsulation.None})export class LoginComponent implements OnInit {  static users: Array<User> = [new User('Michael', 'admin')];  username:string;  password:string;  loggedin:boolean;  constructor(    private _snackBar: MatSnackBar  ) {  }  ngOnInit(): void {    this.loggedin = false;  }  login(username, password){    let currentUser = new User(username, password);    LoginComponent.users.forEach((element) => {      if (element.username == currentUser.username){        if (element.password == currentUser.password){          this.loggedin = true;        }        else {          alert('Incorrect password');        }      }      else {        alert('Unknown user');      }    });  }  logout(){    this.loggedin = false;    window.location.reload();  }主要问题：刷新时如何将用户数组保存在内存中？鉴于我不想添加后端（此时正在开发）

Answer 1

使用 window.localStorage 来存储值..

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API