Angular（基于kendoCheckBox）实现页面刷新或跳转后保留复选框选中状态

当前实现的复选框选中状态完全存储在组件的内存变量selectedActivityType中，当触发页面刷新（Angular应用全量重载，组件内存被清空）、或者路由跳转离开当前组件（组件实例被销毁，内存数据被垃圾回收）时，变量中的选中数据会直接丢失，无法恢复。

核心思路是把选中状态存储在不会被组件销毁、页面刷新清空的介质中，组件初始化时自动读取历史选中值，同步渲染到复选框的选中状态上。

适配不同保留需求的存储选择 #

根据需要的状态保留范围选对应的浏览器存储即可，不需要引入额外依赖：

• 仅需在当前浏览器标签页会话内保留（关闭标签页即清除数据）：使用sessionStorage
• 需要跨页面刷新、跨浏览器标签长期保留（关闭浏览器再打开仍保留状态）：使用localStorage
  两者的API完全一致，替换时只要改对应的调用方法即可。

第一步：改造组件逻辑（component.ts） #

原代码存在几个可优化的点：选中状态无回绑、事件依赖原生DOM对象、表单校验逻辑分散。改造后的代码如下：

isValidForm = false;
public selectedActivityType: string[] = [];
public assignmentFor: {name: string, id: string}[] = [
  {name: "Cause", id: "t1"}, 
  {name: "Resulted damage", id: "t2"},
  {name: "Emergency", id: "t3"}
];
// 统一定义存储键名，避免硬编码分散导致读写不一致
private readonly STORAGE_KEY = 'activityTypeSelected';

constructor() {}

ngOnInit(): void {
  // 组件初始化时加载历史选中状态
  this.loadSavedSelectedState();
  // 初始化完成后同步校验表单有效性
  this.validateFormStatus();
}

/**
 * 从持久化存储读取历史选中值
 */
private loadSavedSelectedState(): void {
  const savedRaw = sessionStorage.getItem(this.STORAGE_KEY);
  if (!savedRaw) return;
  // 解析存储的JSON字符串为数组，同时过滤掉已经不在当前选项列表的无效id，避免脏数据
  const savedIds: string[] = JSON.parse(savedRaw);
  const validOptionIds = this.assignmentFor.map(option => option.id);
  this.selectedActivityType = savedIds.filter(id => validOptionIds.includes(id));
}

/**
 * 将最新选中值同步更新到持久化存储
 */
private saveSelectedState(): void {
  // 浏览器存储仅支持字符串，需要将数组序列化为JSON字符串存储
  sessionStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.selectedActivityType));
}

/**
 * 统一校验表单有效性，避免逻辑重复
 */
private validateFormStatus(): void {
  this.isValidForm = this.selectedActivityType.length > 0 && 
    (this.selectedActivityType.includes(this.assignmentFor[0].id) || 
     this.selectedActivityType.includes(this.assignmentFor[1].id));
}

/**
 * 复选框选中/取消交互逻辑
 */
onActivitySelectChange(option: {name: string, id: string}): void {
  // 不依赖原生event对象判断选中状态，直接基于当前选中数组做增删，逻辑更稳定
  const existIndex = this.selectedActivityType.indexOf(option.id);
  if (existIndex > -1) {
    this.selectedActivityType.splice(existIndex, 1);
  } else {
    this.selectedActivityType.push(option.id);
  }
  // 状态变更后同步更新存储、重新校验表单
  this.saveSelectedState();
  this.validateFormStatus();
}

第二步：改造模板逻辑（component.html） #

原模板存在两个问题：所有复选框共用同一个id不符合HTML规范、未绑定选中状态无法实现回显。改造后的代码如下：

<div *ngIf="assignmentFor.length !==0">
  <div class="container-fluid items-container" style="margin-top: 10px">
    <h5 class="mt-3" style="color : rgb(136,136,139); font-weight: bold">
      assignmentFor
    </h5>
    <div class="row">
      <div *ngFor="let option of assignmentFor; let i=index" class="animated cedfadeInUpX">
        <input 
          type="checkbox" 
          [id]="'activity-'+option.id"
          [checked]="selectedActivityType.includes(option.id)"
          (change)="onActivitySelectChange(option)"
          kendoCheckBox 
        />
        <label 
          class="k-checkbox-label"
          [for]="'activity-'+option.id"
          style="padding-top:10px;margin-left:5px; padding-left:0;font-size: 14px; padding-right: 60px;"
        >
          {{option.name}}
        </label>
      </div>
    </div>
  </div>
</div>

• 每次用户勾选/取消复选框，最新的选中集合会自动写入持久化存储
• 页面刷新、路由跳转后返回当前组件时，会自动读取存储的历史选中值，将对应复选框渲染为选中状态，同时自动完成表单有效性校验
• 解耦了DOM事件和业务逻辑，后续如果需要把选中值同步到后端，只需要替换loadSavedSelectedState和saveSelectedState方法的实现，改为调用接口读写数据即可，不需要改动核心交互逻辑

注意：如果需要跨浏览器重启长期保留选中状态，把代码中所有sessionStorage调用替换为localStorage即可，两者API完全兼容，不需要改动其他逻辑。

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