Item is still in localStorage even after function is called

JavaScript
#1

My deleteItem function doesn’t work. The item is still in localStorage even after the button is clicked. How can I fix this?

In the component:

deleteItem(i){
this.items.splice(i,1);
localStorage.removeItem(i);
this.setStorageItems(this.items);
}
setStorageItems(items: any[]) {
    localStorage.setItem('items', JSON.stringify(items));
}

In the HTML:

<tr *ngFor="let item of items; let i = index">
<td>
<button type="button" (click)="deleteItem(i)" class="deletebtn">X</button></td>
</tr>
#2

have you tried manually calling the function in the console and seeing if it works there?

#3

localStorage.removeItem(i);

console log i
go to developers window (f12)

find the storage area

you will see the key name
and the value data

i must be a string that equals the Key Name you wish to remove

#4

I called localStorage in the developer console and it showed the items that I want to delete but it didn’t delete them.

#5

When I console log i it just shows the product id but not the key value pair.

#6

I edited my question to show the setStorageItems function.

#7

what is the string name of the storage object you wish to remove ?
it will be listed in the Key column of the storage view in developers window
localStorage.removeItem("stringNameOfStorageObject");
same as the name you used when you first created the storage object
localStorage.setItem("stringNameOfStorageObject",JSON.stringify([]));

#8

I was able to fix the issue with localStorage.removeItem(this.storageKey);

#9