在一个组件中设置的 localstorage 值在另一个组件中给出 null angular

Question

我有 angular 应用程序，其中包含 header、用户部分、时间轴组件。在 header 中，我有登录表格。登录后，用户重定向到调用用户部分组件的时间轴组件。在 header 组件中，我需要在登录后将用户数据存储在本地存储中。我需要在用户部分访问该数据。

Header 组件：成功登录后 getUserDetails() 被调用

 getUserDetails() {
 this.userService.getUserDetails(this.id).subscribe((data) => {
      if (data["status"] === false) {
      } else {
        this.loadingFlag = true;
        this.selecteduser = data["data"];
        localStorage.setItem(
        "selecteduser",
           JSON.stringify(data["data"])
         );
     }
 });
}

user-section分量

 ngOnInit(): void {
 console.log('user sec', JSON.parse(localStorage.getItem('selecteduser'))); // Gives null after 
                                                                            //log in
}

我也尝试过使用 BehaviorSubject 以多种方式获取数据，但没有成功，例如。每次都显示为空。它就像在登录重定向到试图获取设置数据的组件后设置后立即获取值。

在header组件中设置的user-section组件如何获取localstorage数据？

我试图解释，但如果我在解释我的问题时感到困惑，我很抱歉。

请指导和帮助。谢谢。

编辑：

在用户部分，我需要根据条件访问本地存储数据。

            ngOnInit(): void {
            this.getUserDetails();
            }
            
            getUserDetails() {
                if (this.user_id == null) {
              console.log('user sec', 
                JSON.parse(localStorage.getItem('selecteduser')));
this.selecteduser = JSON.parse(localStorage.getItem('selecteduser'));
     this.fullName =
                this.selecteduser.first_name + ' ' + this.selecteduser.last_name;
                this.userVerified = this.selecteduser.verified;
            }
            else if(this.user_id == this.id)
            {
this.selecteduser = JSON.parse(localStorage.getItem('selecteduser'));
     this.fullName =
                this.selecteduser.first_name + ' ' + this.selecteduser.last_name;
                this.userVerified = this.selecteduser.verified;
             }
            else{
            // other api call
            }
        
        }

编辑 2： 首次登录

然后注销并第二次登录

然后注销并第3次登录

Answer 1

在您的用户服务中创建一个 getter/setter，其中 returns/sets 一个 ReplaySubject，当您从 userService 方法 this.userService.getUserDetails。然后在你的 user-section 中从 userService 订阅你的 getter 以仅当在 localStorage 中设置用户数据时获取详细信息。

用户服务

selectedUserInLocal$: ReplaySubject<boolean> = new ReplaySubject();

setSelectedUserFlag(temp: boolean): void{
   this.selectedUserInLocal$.next(temp);
} 
getSelectedUserFlag(): ReplaySubject<boolean> {
   return this.selectedUserInLocal$;
}

getUserDetails() {
 this.userService.getUserDetails(this.id).subscribe((data) => {
      if (data["status"] === false) {
      } else {
        this.loadingFlag = true;
        this.selecteduser = data["data"];
        localStorage.setItem(
        "selecteduser",
           JSON.stringify(data["data"])
         );
         this.userService.setSelectedUserFlag(true);
     }
 });
}

用户部分组件


unsubscribe$: Subject<void> = new Subject();

constructer(private userService: UserService) {}

ngOnInit(): void {
 this.userService.getSelectedUserFlag().pipe(filter((value) => {
    return value !== undefined || value !== false;
  }),
takeUntil(this.unsubscribe$)
).subscribe(
    resp  => {
      console.log('user sec', JSON.parse(localStorage.getItem('selecteduser'))); 
    }
  );
}

ngOnDestroy(): void {
  this.unsubscribe$.next();
  this.unsubscribe$.complete();
}

编辑

 this.userService.getSelectedUserFlag().pipe(
            first((user) => user !== null || user !== false || user !== undefined)
        ).subscribe(
            resp  => {
              console.log('user sec', JSON.parse(localStorage.getItem('selecteduser'))); 
            }
          );

在一个组件中设置的 localstorage 值在另一个组件中给出 null angular

localstorage value set in one component gives null in other component angular

javascript

local-storage

rxjs

behaviorsubject

angular