how to use localStore to save Objects from a table who get filled by checkboxes in another table and load data and checkbox state later?

I have a component with 2 tables: 1)favouriteProjects 2)projects

Link to picture

The project will be send from my .html to my ts file and will be added to an favArray. If I click on the star next time, the project will be removed from the favourite table.

How can I save the checked stars and the projects in the favouriteTable in the localStorage, that if I close my browser and reopen the stars will be still checked and the projects still in the favourite table?

I tried a lot before and I was able to store the files in localStorage after clicking a star too. But after reloading the projects were loadet to my favouriteTable and shown, but my problems were:

• the stars still were unchecked
• after checking a star which project still were in the favouriteTable the star got checked, but nothing happend or I wrote the code, that the project were double in the favourite list.

So the main problem is not how to save and load things in a localStorage, but how can I check a star after loading the side and the stars are checked and the projects are in the table and got deleted from this favourite table after uncheck the star insteat of make the project double or nothing happen at the first click. I hope you know what my problem is, sry about the long text :D

HTML:

//favouriteTable (left side):
...
<table id="favouriteTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let favourite of favouriteProjects; let projectIndex=index;">
                            <td (click)="navigateTo(favourite.id)">
                                <span>
                                    
                                </span>
                            </td>
                            <td (click)="navigateTo(favourite.id)">
                                <span>
                                    
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
...
//projectTable (right side)
...
<tr *ngFor="let project of projects">
    <td>
        <span id="checkbox">
             <input id="checkbox-element" type="checkbox"  value= 
             (click)="addItemToFav(project)"/>
             <i [ngClass]="project['isFavourite'] ? 'fa fa-star' : 'fa fa-star-o'"></i>
        </span>
    </td>
</tr>
...

...
export class ProjectComponent implements OnInit {
private projects: Project[] = [];
private favouriteProjects: any[] = [];
}
...

addItemToFav(e) {
        e.fav = !e.fav;
        if (!e.fav) {
          this.favouriteProjects.pop();

        } else {
          this.favouriteProjects.push(Object.assign({}, e));

        }
        e['isFavourite'] = !e['isFavourite'];
      }
...