How to destroy localStorage item- Angular

Question

This is what I now want to do in my component. I want to delete or destroy the contents of localStorage whenever I go to another component. I want to achieve this so that the localStorage variable retains previous values, even if new values ​​come in. Am I on the right track?

Game component

export class Game implements OnDestroy{ constructor(){ this.currentGame = JSON.parse(localStorage.getItem('currentGame')); } ngOnDestroy(){ this.currentGame = null; } } 

Answer 1

you can use

 localStorage.removeItem('currentGame'); 

Alternatively, you can also clear the entire local storage with

 localStorage.clear(); 

Answer 2

I have two pages: 1. The x-dashboard page 2. The y-dashboard page. X-dashboard has a table component. Y-dashoard also has a table component with other data.

Now, I created a common filter component, when the user clicks on the filter icon on the x or y page, then I show the filter options in a pop-up window dynamically based on the columns of the table.

After the user enters some filters and clicks the "Apply" button, I will save this filter value in local storage and get access to this value on the corresponding page (page x or y) depending on the subscriber.

when you go from xpage to ypage by links, I clear the local storage key on ngdestroy. So that the next page does not receive the same filter settings from local storage.

But when I typed url (routing navigation), ngdestroy is not called, and the localalstorage setting (filtered parameters) on page x is displayed on page y.

If I remove the page load, then when the user refreshes, he will lose the filtered parameters. How to solve this problem?