Item is still in localStorage even after function is called

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:

setStorageItems(items: any[]) {
    localStorage.setItem('items', JSON.stringify(items));

In the HTML:

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

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


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

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

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

I edited my question to show the setStorageItems function.

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
same as the name you used when you first created the storage object

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