Потеря данных компонента Angular View во время обновления при перезагрузке с использованием BehaviorSubject

Я пишу приложение Angular9 со случаем использования, когда я буферизирую данные на 3 страницах (с формами, принимающими ввод данных).

Затем, на 4-й странице, я показываю сводку деталей, собранных на 3-х страницах, в виде текста, доступного только для чтения.

Я реализовал буферизацию данных, используя следующую статью:

https://www.infragistics.com/community/blogs/b/infragistics/posts/simplest-way-to-share-data-between-two-unrelated-components-in-angular

Что использует BehaviorSubject

Ниже приведена моя логика службы данных:

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Observable, BehaviorSubject, throwError } from 'rxjs';
    import { retry, catchError } from 'rxjs/operators';
    import { UserResponse } from  './user-response';

    @Injectable({
      providedIn: 'root'
    })

    export class UserService {

        //Details Page 1
        public salutation: BehaviorSubject<string>;
        public firstName: BehaviorSubject<string>;

      // Base url
      baseurl = 'https://localhost:8080/rest';

      constructor(private http: HttpClient) { }

      // Http Headers
      httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }

      // POST
      createUser(data): Observable<UserResponse> {
        alert('user - details = '+ data);
        return this.http.post<UserResponse>(this.baseurl + '/user', JSON.stringify(data), this.httpOptions)
        .pipe(
          retry(1),
          catchError(this.errorHandler)
        )
      }

      // Error handling
      errorHandler(error) {
         let errorMessage = '';
         if(error.error instanceof ErrorEvent) {
           // Get client-side error
           errorMessage = error.error.message;
         } else {
           // Get server-side error
           errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
         }
         console.log(errorMessage);
         return throwError(errorMessage);
      }

}

Ниже мой первый компонент представления:

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserService } from '../service/user.service';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-details1',
  templateUrl: './details1.component.html',
  styleUrls: ['./details1.component.css']
})
export class Details1Component implements OnInit {
  salutation: string;
  firstName: string;

  constructor(private userService: UserService) { }

  ngOnInit(): void {
  }

  goToDetails2(form : NgForm) {
          this.userService.salutation = new BehaviorSubject(form.value.salutation);
          this.userService.firstName = new BehaviorSubject(form.value.firstName);
      }

}

Ниже приведен фрагмент моего окончательного / сводного компонента представления.

import { Component, OnInit} from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from '../service/user.service';

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.css']
})

export class SummaryComponent implements OnInit {

       salutation: string;
       firstName: string;

  constructor(
    private router: Router,
    public userService: UserService
  ) {
   }

   ngOnInit(): void {
       this.userService.salutation.subscribe(c => { this.salutation = c; });
       this.userService.firstName.subscribe(c => { this.firstName = c; });
   }

}

На последней странице мои выдержки из html выглядят следующим образом:

<form #detailsForm4="ngForm">
<div class="govuk-form-group">
  <table class="govuk-table">
    <thead class="govuk-table__head">
    <tr class="govuk-table__row"></tr>
    </thead>
    <tbody class="govuk-table__body" align="left">
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">Salutation</th>
      <td class="govuk-table__cell">   {{salutation}} </td>
      <td class="govuk-table__cell"> </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">First name</th>
      <td class="govuk-table__cell">   {{firstName}} </td>
      <td class="govuk-table__cell"> </td>
    </tr>

Данные отображаются на сводной странице, как они записаны в формах на страницах 1-3, НО данные теряются при обновлении страницы или когда моя машина переходит в спящий режим и т. Д.

Я читал о сохранении локального и сеансового хранилища и использовал его с дней angularjs 1.x. Много лет назад я был действительно удивлен, когда данные исчезли на моем итоговом экране!

Я предполагаю, что идеальное решение будет заключаться в хранении данных в хранилище на стороне клиента, когда пользователь уходит от соответствующей формы, а затем извлекает данные на странице сводки.

Я предполагаю, что когда сводная страница обновляется или отображается в первый раз, я проверю хранилище на наличие данных и покажу, существуют ли они. Если хранилище пусто, я буду использовать данные с предыдущей страницы во время выполнения.

Пожалуйста, мне нужна помощь с лучшими практиками и стабильным решением, которое поддерживает кроссбраузерность и интеллектуально для коммерческого приложения.

Кроме того, подход, который вписывается в Angular9 BehaviorSubject - стек rxjs ИЛИ какие-либо недавние функции, потому что я знаю, что Angular развился со времен AngularJs 1.x?

Сводная информация изменяется только тогда, когда пользователь возвращается на любую из страниц 1-3, чтобы изменить детали формы.

Я буду признателен за любой фрагмент кода или ссылку, чтобы сохранить данные на сводной странице.

Большое спасибо.