如何正确设置localStorage数据？单选按钮存地址返回null的修复方法

出现本地存储值为null的核心原因有两点：

• 事件触发时序错位：你把点击事件绑定在单个ion-radio元素上，原生click事件的触发顺序早于Ionic组件内部ion-radio-group的选中值更新流程。首次点击时，radio-group还没完成响应式表单的数值同步，此时读取this.form.value.pickup_points_id拿到的就是初始null值，自然会把空值写入本地存储。
• 即使后续二次点击能拿到值，这种绑定方式也无法覆盖键盘操作、代码手动赋值等其他场景的选中值变更，逻辑稳健性很差。

另外要注意：localStorage仅支持存储字符串类型值，如果传入数字、对象等非字符串类型，会被隐式转成字符串，容易出现类型不匹配的问题。

按实现的稳健程度从高到低排序，可任选其一落地：

• 方案1（推荐）：把值变更监听从单个radio的click事件，迁移到ion-radio-group自带的ionChange事件上。这个事件是组件内部完成选中状态切换、同步好响应式表单值之后才触发的，时序完全匹配。
  调整后的HTML代码：

  <form [formGroup]="form">
    <ion-list>
      <!-- 将变更事件绑定在radio-group层级，移除单个radio上的click绑定 -->
      <ion-radio-group 
        formControlName="pickup_points_id"
        (ionChange)="onSelectPickupPoint()"
      >
        <ion-item *ngFor="let pickuppoint of pickuppoints">
          <ion-label>{{pickuppoint.address}}</ion-label>
          <ion-radio 
            slot="start" 
            [value]="pickuppoint.pickup_point_id"
          ></ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>
  </form> 
  

• 方案2：如果需要保留单个radio的点击逻辑，需要把表单值读取操作放到延迟执行队列中，等当前同步执行的组件值更新流程走完再读取。调整后的TS代码：

  onSelectPickupPoint() {
    // 延迟到当前执行栈清空后再读取最新表单值，跳过组件值更新的时序差
    setTimeout(() => {
      const selectedId = this.form.get('pickup_points_id')?.value;
      // 判空后再写入，避免用空值覆盖已有有效存储
      if (selectedId !== null && selectedId !== undefined) {
        // 序列化非字符串类型值，避免隐式类型转换问题
        localStorage.setItem('selectedPickupPoint', JSON.stringify(selectedId));
      }
      console.log(localStorage.getItem('selectedPickupPoint'));
    }, 0)
  }
  

• 方案3（最稳健）：结合响应式表单的特性，直接订阅对应表单控件的valueChanges流。不管选中值是通过点击radio、键盘操作、代码手动赋值哪种方式变更的，都能自动把最新值同步到localStorage，完全不需要绑定DOM事件。示例代码：

  ngOnInit() {
    this.form.get('pickup_points_id')?.valueChanges.subscribe(selectedId => {
      if (selectedId !== null) {
        localStorage.setItem('selectedPickupPoint', JSON.stringify(selectedId));
      }
    })
  }
  

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