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

Question

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

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

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();
}
register(username, password) {
LoginComponent.users.push(new User(username, password));
this._snackBar.open(username +" is added", 'close', {
duration :4000,
});
}
}

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

Answer 1

使用window.localStorage存储值。。

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