Currently, I am storing and retrieving form values from localStorage. When displaying the data, I want to be able to remove a specific object that is clicked on. The issue is that my current code removes all the data instead of just the selected object. Below is an example of the policy value:
"beneficiaryInfo":[
{
"name":"test",
"surname":"test2",
"personalNumber":"02027041738",
"phone":"5685522555"
},
{
"name":"test3",
"surname":"test5",
"personalNumber":"02027041738",
"phone":"5685522555"
}
]
.html
<div *ngFor="let u of user.beneficiaryInfo">
<span>
{{u.name}} {{u.surname}}
</span>
<div class="del" (click)="del()">
</div>
</div>
.ts
get user(): any {
return JSON.parse(localStorage.getItem('policy'));
}
del() {
updateLocalStorage('policy', removeValueFromObject<Policy>(getFromLocalStorage<Policy>('policy'), 'beneficiaryInfo'));
}
helpers.ts
export const updateLocalStorage = (storageKey: string, object: object) =>
localStorage.setItem(storageKey, JSON.stringify(object));
export function getFromLocalStorage<T>(storageKey: string): T {
return JSON.parse(localStorage.getItem(storageKey));
}
export function removeValueFromObject<T>(object: T, key: string): T {
delete object[key];
return object;
}