Save an item position after reload the page Angular

Question

I need to save my drag and drop position locally so that when refreshing the page the position keeps the same, but to be honest I dont know how can I do it. I have already saved the position on my database using a function when I drop my drag and drop. Could someone help me please?

[//This is my HTML][1]

                <div *ngIf="boards.length > 0">
                <div (dblclick)="openUpdateDialog(b.id)" class="example-box" cdkDragBoundary=".example-boundary"
                    cdkDrag (cdkDragEnded)="onDragEnded($event , b.id)" *ngFor="let b of boards;">
                    <p>Board {{b.number}}</p>
                    <p *ngIf="b.name">: {{b.name}}</p>
                </div>
            </div>


//here I got the position and saved into the database

onDragEnded(event, id) {
    this.p = event.source.getRootElement().getBoundingClientRect();
    console.log(this.p);

db.collection('mainBoards').doc({ id: id }).update({
  position: {
    bottom: this.p.bottom,
    height: this.p.height,
    left: this.p.left,
    right: this.p.right,
    top: this.p.top,
    width: this.p.width,
    x: this.p.x,
    y: this.p.y,
  }
}).then(() => {

})
// this.p
}

 //Here is the function which is listing the item I want to save the position when I reload the page

 getBoards() {
db.collection('mainBoards').get().then(boards => {
  this.boards = (boards)
 })
}