Angular: 如何避免本地存储中的重复条目

Question

当我点击心型按钮时，该行的数据会存储在本地存储中，但我希望存储在本地存储中的数据是唯一的，因为当我点击同一行两次时，会在本地存储中创建重复条目.

我在此处附上了本地存储的屏幕截图，您可以看到分支的重复条目存储在本地存储中。

这是我的代码的 link https://stackblitz.com/edit/angular-ofvnz3?file=src%2Fapp%2Fhome%2Fhome.component.html

但是你不能运行因为一些导入错误。可以的话请解决

Answer 1

在你的 activeskill 函数中......你在 value 数组中推送元素（传递给函数）而不检查它是否已经存在......因此重复;要解决此问题，请在推送之前检查该值是否已存在于 value 数组中；

相关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));
  }

相关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>

最小可验证complete stackblitz here

Angular: 如何避免本地存储中的重复条目

Angular: How to avoid duplicate entries in localstorage

typescript

angular-local-storage

angular