How can i save the user selected option after refresh

April 21, 2023

i’m using a mat-option and the default value is 10 but the user can change this number from the option list, how can i save his variable if he select let’s say 25 and even after he refresh the page the default value is his choice.

I’ve tried localstorage but the value resets after refreshing the page

<div class="col-md-auto">
                <mat-form-field style="width: 100px;">

                <mat-label>Elements on page</mat-label>
                <mat-select style="width: 100px" [(ngModel)]="limit">
              
                  <mat-option value="10">10</mat-option>
                  <mat-option value="25">25</mat-option>
                  <mat-option value="50">50</mat-option>
                  <mat-option value="100">100</mat-option>
                  
                </mat-select>
               
              </mat-form-field>
            </div>

and my typescript is like this

limit:any = '10';

ngOnInit(): void {
    localStorage.setItem("limit", localStorage.getItem("limit"))
  
  }

>Solution :

What you want when the page is loaded is set the localStorage value inside your limit parameter :

ngOnInit(): void {
   this.limit = localStorage.getItem("limit");
}

Then, you must catch when user change value to set it inside the localstorage :

changed(): void {
    localStorage.setItem("limit", this.limit)
  }

And update your HTML :

<mat-select (change)="changed()" style="width: 100px" [(ngModel)]="limit">
             
                  <mat-option value="10">10</mat-option>
                  <mat-option value="25">25</mat-option>
                  <mat-option value="50">50</mat-option>
                  <mat-option value="100">100</mat-option>
                  
                </mat-select>