Local Storage System In the Angular

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.

<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.

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.

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

localStorage.removeItem(this.key1)