如何在页面刷新后保存用户选择的mat-option选项值？

问题描述 #

我使用mat-option组件实现分页条数选择器，默认值为10，用户可选择25、50、100等数值。希望页面刷新后，默认值自动变为用户之前选择的数值，但尝试使用localStorage后，刷新页面数值仍会重置。现有代码如下：

HTML代码

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

TypeScript代码

limit:any = '10';

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

问题分析 #

现有代码存在两个关键问题：

• ngOnInit中仅将localStorage的limit值重新存入，未将存储的值赋值给组件的limit变量，导致初始化时始终使用默认值10。
• 未监听用户选择变化，无法将新选择的数值同步到localStorage。

修正方案 #

1. 初始化读取localStorage值

在组件初始化时，优先从localStorage读取保存的数值，若存在则覆盖默认值。

2. 监听选择变化同步存储

通过ngModelChange事件监听用户选择，将新数值存入localStorage。

修正后的HTML代码

<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" (ngModelChange)="onLimitChange($event)">
      <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>

修正后的TypeScript代码

limit: any = '10';

ngOnInit(): void {
  // 读取localStorage中的值，存在则覆盖默认值
  const savedLimit = localStorage.getItem("limit");
  if (savedLimit) {
    this.limit = savedLimit;
  }
}

onLimitChange(newValue: any): void {
  // 用户选择新值时，同步更新localStorage
  localStorage.setItem("limit", newValue);
}

效果说明 #

页面初始化时，会优先加载localStorage中保存的用户上次选择的数值；用户每次切换选项时，新数值会自动存入localStorage，刷新页面后将保持用户的选择状态。

内容的提问来源于stack exchange，提问作者Mega