Javascript Angular应用程序-刷新时静态列表为空

我正在尝试用Angular创建一个登录页面。我有一个角度组件（html、css和ts文件）来处理这个功能。从HTML中，有两个字段和两个按钮。用户名、密码、登录和注册。如果您输入一个不熟悉的用户名和密码并单击register，我希望TS组件将该用户（带有密码）添加到有效组合列表中

如果我用我的硬编码用户（michael）登录，它可以正常工作。如果我注册一个用户并立即登录，它也可以工作。但是当我注册一个用户并刷新页面时，新注册的用户将从列表中消失

HTML:

名称
密码
登录
登记

TS:

从'@angular/core'导入{Component，OnInit，viewenclosuration}；
从“@angular/material/snakp bar”导入{matsnakbar}；
导出类用户{
用户名：字符串；
密码：字符串；
构造函数（用户名、密码）{
this.username=用户名；
this.password=密码；
}
}
@组成部分({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.css']，
封装：视图封装。无
})
导出类LoginComponent实现OnInit{
静态用户：数组=[新用户（'Michael'，'admin'）]；
用户名：字符串；
密码：字符串；
loggedin：布尔型；
建造师(
私人小吃店：Matsnakbar
) {
}
ngOnInit（）：void{
this.loggedin=false；
}
登录（用户名、密码）{
让currentUser=新用户（用户名、密码）；
LoginComponent.users.forEach（（元素）=>{
if（element.username==currentUser.username）{
if（element.password==currentUser.password）{
this.loggedin=true；
}
否则{
警报（“密码不正确”）；
}
}
否则{
警报（“未知用户”）；
}
});
}
注销（）{
this.loggedin=false；
window.location.reload（）；
}
注册（用户名、密码）{
LoginComponent.users.push（新用户（用户名、密码））；
此._snackBar.open（用户名+“已添加”、“关闭”{
持续时间：4000，
});
}
}

---

主要问题：发生刷新时，如何将用户数组保留在内存中？如果我不想添加后端（在开发的这一点上）

请使用window.localStorage来存储值

---

使用window.localStorage存储值

---

将其存储在本地/会话存储中？是的，本地存储非常完美，听起来现在应该可以使用了@jonrsharpe你能把这个作为一个答案贴出来让我接受吗？把它存储在本地/会话存储中？是的，本地存储很完美，听起来现在应该可以用了@jonrsharpe你能把这个作为一个答案贴出来让我接受吗？

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

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

  register(username, password) {
    LoginComponent.users.push(new User(username, password));
    this._snackBar.open(username +" is added", 'close', {
      duration :4000,
    });
  }
}