如何以角度将对象存储在本地存储中？答案

【问题标题】：How can i store object in local storage in angular?如何以角度将对象存储在本地存储中？
【发布时间】：2019-06-17 15:49:14
【问题描述】：

我有一个名为 model 的对象，我希望它存储在 localstorage 中。

model.username 和 model.password 是我表单的两个字段。我想将 model.username 存储在本地存储中。我需要添加要添加到本地存储中的每个用户名。但在我的情况下，每次我尝试输入新用户名时，以前的用户名都会在本地存储中被覆盖，即只有一个用户名随时只存储在 ls 中。

下面是登录模板

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

【问题讨论】：

Storage.setItem()
使用本地存储，密钥是唯一的。您不能让一个密钥存储两个值。这就是对象或数组的用途。
@Kobe 这就是我的意思是问如何每次在键/值对中获取不同的键。谢谢
How to retrieve the value from LocalStorage的可能重复

标签： javascript angular typescript

【解决方案1】：

忽略在localStorage 中存储多个用户名的奇怪想法，您可以通过插入数组或对象来做到这一点。因为localStorage的key是唯一的：

const usernames = JSON.parse(localStorage.getItem('usernames') || '[]');

if (!usernames.includes(this.model.username)) {
  usernames.push(this.model.username);
  localStorage.setItem('usernames', JSON.stringify(usernames));
}

如果您这样做是为了稍后在导航后获取数据，我建议您彻底阅读有关使用 services/store 而不是 localStorage 的信息。

【讨论】：

【解决方案2】：

本地存储基于键存储值，一次只保存一个值，不保存数组。

【讨论】：