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