从localStorage Angular中的数组中删除项目

Question

I have been trying to do this for a while now, the code below is what I currently have and it works when I only have one array in it, but anything over when I run the delete function the whole app freezes and I can't exit out of it can someone tell me what I am doing wrong. I have auto incormenting ids for each array entered, but I have no clue why it freezes

/*Favourites Service */
public deleteLocalStorage(id, i ): void {
  const currentArray = this.storage.get(this.STORAGE_KEY);
  for (i = 0; i < currentArray.length;) {
    if (currentArray[i].id === id) { currentArray.splice(i, 1); }
  }
  // insert updated array to local storage
  this.storage.set(this.STORAGE_KEY, currentArray);
}
/*Home page Delete function*/
deleteFav(id, i) {
  this.Local.deleteLocalStorage(id, i);
  console.log(id, i);
}

<div class="panel col-5" (click)="deleteFav(stop.id, i)">
 <img class="panel-remove" src="assets/img/icon_remove.png" />
</div>

Answer 1

Rather than storing an array in localstorage, stringify the array while storing and on fetch just parse it. This way you are not storing complicated arrays in the localstorage but a string.

public deleteLocalStorage(id, i ): void {
  const currentArray = JSON.parse(this.storage.get(this.STORAGE_KEY));
  for (i = 0; i < currentArray.length; ++i) {
    if (currentArray[i].id === id) { currentArray.splice(i, 1); }
  }
  // insert updated array to local storage
  this.storage.set(this.STORAGE_KEY, JSON.stringify(currentArray));
}


localStorage.set(key, JSON.stringify(arr));

let x = JSON.parse(localStorage.get(key));