CODEWITHSUNDEEP
angulartypescriptangular-local-storage
vaibhav naik
vaibhav naik

Reputation: 169

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.

Upvotes: 1

Views: 3218

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

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

Upvotes: 2

Related Questions