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

Question

I have angular application which has header, user section, timeline components. In header, I have log in form. After log in user redirected to timeline component which calls user section component. In header component I need to store user data in localstorage after log in. And that data I need to access in user section.

Header component: on successfull login getUserDetails() is called

 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 component

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

I tried to get data using BehaviorSubject also in multiple ways but didn't worked e.g. like here. It shows null every time. Its like getting value as soon as it is set as after log in redirected to component which tries to get set data.

How can I get localstorage data in user-section component which is set in header component?

I tried to explain but sorry if I confuse while explaining my problem.

Please guide and help. Thanks.

Edit:

In user section I need to access that localstorage data on condition.

            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
            }
        
        }

Edit 2: First login

Then logout and login 2nd time

Then logout and login 3nd time

Did you make sure that data is being set in `localStorage` by checking in the `application` tab of chrome dev tools? — HassanMoin, Feb 15 '22 at 21:27
It is too hard to answer without all code. Did you run TS Lint? No issues? — Dmitry Grinko, Feb 16 '22 at 05:46

HassanMoin · Accepted Answer · 2022-02-18T06:43:28.080

2

Create a getter/setter in your user service which returns/sets a ReplaySubject, add the value in that ReplaySubject when you get the response from the userService method this.userService.getUserDetails. And then in your user-section subscribe to your getter from the userService to get the details only when the user data is set in the localStorage.

User Service

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);
     }
 });
}

User Section Component


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

Edit

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

edited Feb 18 '22 at 06:43

answered Feb 15 '22 at 21:35

HassanMoin

2,024
1
6
16

I tried above logic. After login, in console `user sec` gets prints 3 times. first it has value `null` then other 2 times data seen on `user sec`. Not getting why its taking null first time. – ganesh Feb 16 '22 at 05:23
Actually, in user section, I need to access that localstorage value on condition and need to access its attributes like I added in Edit of my question. I tried ` this.userService.getSelectedUserFlag().subscribe( resp => { console.log('user sec', JSON.parse(localStorage.getItem('selecteduser'))); console.log('selecteduser',this.selecteduser.first_name); } );` this in method of user section. but as it gives first null, so showing error `Cannot read properties of null (reading 'first_name')` – ganesh Feb 16 '22 at 05:29
@Ganesh, I updated the answer to filter out null values. You shouldn't get the above error, try again with code I edited. – HassanMoin Feb 16 '22 at 06:06
do we need to clear/destroy `selectedUserInLocal$` ? as if I login for first time it prints only data of user. then if i logout and login again then I gets first null then 2 times user data. If I repeat this process null and data gets incremented. Pls check added screenshots in question. – ganesh Feb 18 '22 at 05:02
Yes, you'll have to clear/destroy `selectedUserInLocal$` either when you leave the component or when you log out. I edited the code above to add `takeUntil` as well as add `unsubcribe$` subject to complete the Subject in `ngOnDestroy()` – HassanMoin Feb 18 '22 at 06:01
@Ganesh, let me know if it works – HassanMoin Feb 18 '22 at 06:08
somehow it still prints null and data twice. I am not getting why. My flow is like, in header component we stored data in localstorage and used that in components which I am redirecting after login. after login I am just navigating to timeline component which has user section component included – ganesh Feb 18 '22 at 06:17
I am not getting why it is taking first null and then printing data twice. – ganesh Feb 18 '22 at 06:19
Because the subscription never gets canceled or destroyed. when you come to the timeline component again, it subscribes again and shows the data twice. Did you try the above-edited code? – HassanMoin Feb 18 '22 at 06:21
yes yes, I tried `takeUntil` and `ngOnDestroy()`. With this also getting same result as in the Edit 2 of question. That's why now I am not getting the reason. – ganesh Feb 18 '22 at 06:25
@Ganesh, try the code in the new edit. – HassanMoin Feb 18 '22 at 06:43
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242148/discussion-between-ganesh-and-hassanmoin). – ganesh Feb 18 '22 at 10:44

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

1 Answers1