Angular how to pass and access data for localStorage

Question

I am trying to implement localStorage but cant make it work, what i expect to happen is when user clicks on either button (6 buttons with city names) on homepage it is gonna save the value(city name) of the button to localStorage and redirects him to different user input component where is dropdown with same cities as on the buttons in homepage and its gonna already have prefilled/selected the city from the dropdown with the city which was clicked when user clicked on homepage button (prefill with saved value from localStorage).

So when user click on Tokyo it redirects him to the user input and the dropdown should be preselected to Tokyo. Right now when user clicks on either button and it redirects him the dropdown selection doesnt change. Its still the default value (London)

this is homepage html

  <div class="grid">
    <button *ngFor="let button of buttons" [value]="button.name" pButton type="button" routerLink="/weather-data" (click)="changeCityData($event)">{{button.name}}</button>
  </div>

this is homepage ts component

export class HomeComponent implements OnInit {
  buttons: City[];
  constructor(
    private weatherService: WeatherService,
    private localService: LocalService
  ) {
    this.buttons = [
      new City('London', '51.51', '-0.13'),
      new City('Sydney', '-33.87', '151.21'),
      new City('New York', '40.71', '-74.01'),
      new City('Paris', '48.85', '2.35'),
      new City('Tokyo', '35.69', '139.69'),
      new City('Bratislava', '48.15', '17.11'),
    ];
  }
  ngOnInit(): void {}

  changeCityData(event) {
    const city = event.target.value;     // here iam saving the city to localStorage
    this.localService.saveData('city', city); // <=

    if (event.target.value === 'London') {
      this.weatherService.coordinatesSubject.next({
        lat: '51.51',
        lon: '-0.13',
        startDate: '2005-08-25',
      });
    } else if (event.target.value === 'New York') {
      this.weatherService.coordinatesSubject.next({
        lat: '40.71',
        lon: '-74.01',
        startDate: '2005-08-25',
      });
    } else if (event.target.value === 'Tokyo') { ... code

this is user input html

<form class="user-input" [formGroup]="userInput" (ngSubmit)="onSubmit()">
  <p-dropdown [options]="cities" formControlName="selectedCity" optionLabel="name"></p-dropdown>
  <p> weather data for </p>
  <p-calendar placeholder="Choose a date" formControlName="selectedDate"></p-calendar>
  <button [disabled]="!userInput.controls['selectedDate'].value" style="margin-left: 10px;" class="form-control" pButton label="Submit"></button>
</form>

this is user input ts

export class UserInputComponent implements OnInit {
  cities: City[];
  value: Date;
  userInput: FormGroup;

  constructor(
    private weatherService: WeatherService,
    private router: Router,
    private datePipe: DatePipe,
    private localService: LocalService
  ) {
    this.cities = [
      new City('London', '51.51', '-0.13'),
      new City('Sydney', '-33.87', '151.21'),
      new City('New York', '40.71', '-74.01'),
      new City('Paris', '48.85', '2.35'),
      new City('Tokyo', '35.69', '139.69'),
      new City('Bratislava', '48.15', '17.11'),
    ];
  }

  ngOnInit(): void {
    this.userInput = new FormGroup({
      selectedCity: new FormControl(new City('London', '51.51', '-0.13')),  //default city is set here
      selectedDate: new FormControl(null),
    });
    
    this.userInput.controls['selectedCity'].setValue(     // here iam trying to set the city from dropdown so its selected
      this.localService.getData('city')
    );

    this.userInput.controls['selectedDate'].setValue(
      this.datePipe.transform(sessionStorage.getItem('date'), 'MM/dd/yyyy')
    );
  }


  onSubmit() {
    this.router
      .navigateByUrl('/', { skipLocationChange: true })
      .then(() => this.router.navigate(['/weather-data']));
    const lat = this.userInput.controls['selectedCity'].value.lat;
    const lon = this.userInput.controls['selectedCity'].value.lon;
    const startDate = this.datePipe.transform(
      this.userInput.controls['selectedDate'].value,
      'yyyy-MM-dd'
    );
    sessionStorage.setItem('date', startDate);
    this.localService.saveData(
      'city',
      this.userInput.controls['selectedCity'].value.name
    );
    this.weatherService.coordinatesSubject.next({
      lat: lat,
      lon: lon,
      startDate: startDate,
    });
  }
}