How can you save the state/position of dragged items using Angular Drag and Drop

I am creating a web app that shows people in rooms. When I drag a person from a room to another room I want that person to stay in that room even after a page refresh. How can I achieve this, I have looked into it but to no avail.

My code is html:

<div class="container">
        <h2>Studio 1</h2>
        <div cdkDropList #doneMovieList="cdkDropList" [cdkDropListData]="MoviesWatched"
          [cdkDropListConnectedTo]="[moviesList, toglist, ppolist]" class="movie-list" 
(cdkDropListDropped)="onDrop($event)">
          <div class="movie-block" *ngFor="let moviesWatched of MoviesWatched" cdkDrag>. 
{{moviesWatched}}</div>
    </div>
  </div>

 <div id="first" class="bottompanel">
        <h2>People</h2>
        <div cdkDropList #moviesList="cdkDropList" [cdkDropListData]="MoviesList"
          [cdkDropListConnectedTo]="[doneMovieList, donestudio2, donestudio3, donestudio4, 
donestudio5, donestudio6, donestudio7]" class="movie-list" (cdkDropListDropped)="onDrop($event)">
          <div class="movie-block" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
        </div>

TS

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

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

export class AppComponent {
  Movies = [
    'terrence',
    'pops',
    'phil',
    'jack'
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.Movies, event.previousIndex, event.currentIndex);
  }

  // Transfer Items Between Lists
  MoviesList = [
    'terrence',
    'pops',
    'phil',
    'jack'   
  ];

  togList = [
    'PHIL',
    'CARL',
    'JAMES',
    'BEN'   
  ];

  ppoList = [
    'Adam',
    'Benji',
    'Kris',
    'George'   
  ];

  MoviesWatched = [
  ];

  onDrop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
}

Any help would be appreciated. Also any suggestions on other maybe potentially better ways to achieve this goal would be great. The overall goal is to create a page that you can see the rooms the people are in, with nice usability features such as drag and drop.