Hello friends this is my second article Here we will learn how to use locostorage.

Let's Start

Step 1. Create Component <ng g c component name>

Step 2. Add Select dropdown or button Click. as your requirement.

HTML / XML
<div class="col-lg-2">
    <mat-form-field appearance="outline" class="w-100">
        <mat-label>Title</mat-label>
        <mat-select (selectionChange)="selectTitle($event)" formControlName="title" required>
            <mat-option *ngFor="let list of titleList" [value]="list.value">{{list.value}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>

Step 3. Add code in the typescript file.

JavaScript
key1 = "storeValue";

selectTitle(event: any) {
    const setItem = {
        id: event.target.value.id,
        title: event.target.value.title,
    };
    localStorage.setItem(this.key1, JSON.stringify(setItem));
}

Note. Declare the key1 variable above.

Here are your set ID and title in LocalStorage after setting the ID and password you need to get the ID and password where you need them.

Step 4. Get your localStorage value.

JavaScript
let adc = JSON.parse(JSON.parse(JSON.stringify(localStorage.getItem(this.key1))));

if (adc) {
    filtObj['id'] = adc.id;
    filtObj['title'] = adc.title;
} else {
    // Your else code here
}

After getting the value from LocalStorage, you need to remove the value from the Clear or Reset Button.

Step 5

JavaScript
localStorage.removeItem(this.key1)