Angular: How to avoid duplicate entries in localstorage

When I click on the heart button the data from that row gets stored in local storage but I want the data stored in local storage to be unique because when I click on the same row twice duplicate entry gets created in local storage.

I have attached a screenshot of local storage here you can see duplicate entries of a branch are stored in local storage.

here is the link to my code https://stackblitz.com/edit/angular-ofvnz3?file=src%2Fapp%2Fhome%2Fhome.component.html

but you can't run this because of some import error. please solve it if possible.

In your activeskill function... you're pushing the element (which is passed to the function) in value array without checking if it was already there... hence the duplication; to resolve this, check to see if the value already exists in the value array before you push;

relevant TS:

myFavArray: PeriodicElement[] = [];

  constructor() {
    if (localStorage.getItem('fav') == '' || localStorage.getItem('fav') == null) {
    } else {
      this.myFavArray = JSON.parse(localStorage.getItem('fav'));
      console.log('from localStorage', this.myFavArray);
    }
  }
  activeSkill(element) {
    let checkExists: boolean = false;
    for (var i = 0; i < this.myFavArray.length; i++) {
      if (element.position == this.myFavArray[i].position) {
        checkExists = true;
      }
    }
    if (checkExists == false) {
      this.myFavArray.push(element);
    }
    localStorage.setItem('fav', JSON.stringify(this.myFavArray));
  }

relevant HTML:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element">
            <button  (click)="activeSkill(element)" mat-icon-button>
    <mat-icon aria-label="Heart">favorite</mat-icon>
 </button>

      {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

minimal verifiable complete stackblitz here