如何在Angular中同步从浏览器的本地存储中获取数据答案

【问题标题】：How to fetch data from localstorage of a browser synchronously in Angular如何在Angular中同步从浏览器的本地存储中获取数据
【发布时间】：2020-12-11 19:23:13
【问题描述】：

这似乎是一个非常简单的任务。我已经编写了代码，它也可以正常工作。但是有一个小问题。首先让我给你看代码：

navbar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  currentUserFirstname="";
  currentUserLastname="";

  constructor() {
  }

  ngOnInit() {
    this.currentUserFirstname=localStorage.getItem('firstname');
    this.currentUserLastname=localStorage.getItem('lastname');
  }
}

navbar.component.html

<span class="current-user">{{currentUserFirstname}} {{currentUserLastname}}</span>

我只想显示我必须从存储中获取的当前登录用户。问题是，它永远不会第一次显示。看，在绿色圆圈之后什么都没有：

但是当我刷新一次页面时。值出现。看：

我尝试使用setTimeout()，但没有成功：

ngOnInit() {
    setTimeout(function(){
      this.currentUserFirstname=localStorage.getItem('firstname');
      this.currentUserLastname=localStorage.getItem('lastname');
   }, 2000);
  }

请帮助我。我需要帮助使该任务的代码同步。

【问题讨论】：

您可以使用该服务来存储名称并在初始化时从那里获取它。
我认为这是一个设计问题，例如组件是在存储中有信息之前创建的。尝试对 firstName / lastName 的 ngOnInit() 方法执行 console.log。
@MohitKumar 哦，好的，先生。那么用简单的样板代码是不是不能实现呢？
@HTN，你是对的。我试过控制台日志。两者都给我<empty string>。
导航栏组件应该在用户登录时动态创建，或者它应该监听这个事件来更新用户名。

标签： angular local-storage

【解决方案1】：

当您的代码被执行时，您确定这些值已经设置为 localStorage 了吗？

听起来你会在以后的任何事件中设置它们，当然如果你刷新它已经设置好了。

【讨论】：

是的，实际上在用户登录的那一刻，用户的名字和姓氏就被存储在本地存储中。我上面问的问题是登录后问题。
我还注意到，有时它会显示以前登录用户的名称。但同样，当我刷新页面时，它会显示正确的名称。
在你读到这里之后，听起来确实像你只有 localStorage.setItem。为您读/写数据的每个地方创建一个 console.log() 并确保顺序。
吉米你是对的。其实是我的错。这两个值都给了我<empty string>。我正在尝试在登录代码和导航栏代码之间建立一个公共服务。
这里的最佳做法是从 rxjs 创建一个 BehaviorSubject 并在第一次初始化时用 localStorage 值填充它，但是当用户登录/注销时更新 BehaviorSubject 和 localStorage

【解决方案2】：

本地存储即使在构造函数中也有效，因此请检查或添加调试器，并在函数尝试从存储中获取值之前检查本地存储是否包含该值

【讨论】：