I have this Observable which checks if a key is stored in the local storage of the browser. Value from this observable is used in another observable. However, I noticed that the values coming in from the observables are different in the logs of the Development Command Prompt and the browser console.

checkIfUserIsStoredInLocal(): Observable<boolean> {
  const localStorage = this.document.defaultView?.localStorage;

  if (localStorage!== undefined) {
    if (localStorage.getItem("currentAppUser") !== null) {
      var currentUserLocal = localStorage.getItem("currentAppUser");
      this.currentUser = JSON.parse(currentUserLocal!);
      this.currentUserProfileBS.next(this.currentUserProfile);
      console.log("User exists in local");
      return of(true);
    };

    return of(false);
  }

  return of(false);
}

initializeComponentLogin(): Observable<boolean> {
  var initialization: Observable<any> = this.checkIfUserIsStoredInLocal().pipe(
    take(1),
    tap(x => console.log("data from $ is " + x)),
    tap(() => console.log("Current user is " + this.currentUser)),
  );

  return initialization;
}

Output from Developer Command Prompt:

Output from Browser Console:

I noticed this because I was trying to use the values stored in the local storage in another observable using concatMap but shows an undefined error. I’m not entirely sure if I’m chaining these observables the correct way. My intent is to check if the user exists in the local storage, then validate that user to the server, then get additional details of that validated user from the server.