Question

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

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

不建议将密码保存在本地存储中。

Answer 2

您可以执行以下操作，将它们存储为数组

存储它们：

const newUsers = [...JSON.parse(localStorage.getItem('username')),this.model.username];
    localStorage.setItem('username', JSON.stringify(newUsers));

然后使用：

const users = JSON.parse(localStorage.getItem('username'));

Answer 3

LocalStorage就像键值映射来保存变量。

完成时

 localStorage.setItem ('username', this.model.username);

客户端在浏览器中将键“用户名”保存为值this.model.username。另一个客户端/浏览器将保存自己的值，但是键“用户名”仅引用一个“存储单元”。

您试图实现的行为在功能上没有意义，因为您使用它来存储就像是一个关系数据库一样。

您可以了解本地存储，例如cookie存储，它们的行为相同。

如果您仍然希望将其用作存储目的，则可以创建一个计数器并实现一个要执行的功能：

localStorage.setItem ('username' + counter, this.model.username);

然后通过迭代读取它们并将其存储在数组中。

但是我坚持认为这不是一个好主意，因为如果要尝试可以将它们简单地存储在数组中

Answer 4

有一个很棒的库ngx-webstorage，您应该尝试一下。

商店

import {Component} from '@angular/core';
import {LocalStorageService} from 'ngx-webstorage';



@Component({
    selector: 'foo',
    template: `
        <section><input type="text" [(ngModel)]="attribute"/></section>
        <section><button (click)="saveValue()">Save</button></section>
    `,
})
export class FooComponent {

    attribute;

    constructor(private storage:LocalStorageService) {}

    saveValue() {
      this.storage.store('boundValue', this.attribute);
    }

}

检索

import {Component} from '@angular/core';
import {LocalStorageService} from 'ngx-webstorage';

@Component({
    selector: 'foo',
    template: `
        <section>{{attribute}}</section>
        <section><button (click)="retrieveValue()">Retrieve</button></section>
    `,
})
export class FooComponent {

    attribute;

    constructor(private storage:LocalStorageService) {}

    retrieveValue() {
      this.attribute = this.storage.retrieve('boundValue');
    }

}

Answer 5

回答您的问题。

LocalStorage由名称/值对组成。所以这样做您将覆盖以前的用户名的值（假设您是在同一浏览器窗口上进行测试）

localStorage.setItem ('username', this.model.username);

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

实际上，每个用户都将使用自己的系统登录，因此具有不同的localStorage实例。登录后，他们将看到自己的用户名。出于测试目的，您可以打开多个浏览器（Chrome，Firefox等），登录并检查同一键的值。

在应用验证API成功响应后（假设您已与后端集成），从JWT令牌中提取用户名是更常见的做法

” ...当我们输入另一个用户名时，先前的用户名将被覆盖。想要显示所有用户名。“

我不确定这个用例。

如何从本地存储中获取数据并以角度显示在表中？

5 个答案: