Блог

Главная - Вопросы по программированию - Как правильно установить данные в localstorage?

Как правильно установить данные в localstorage?

#angular

#angular

Вопрос:

Когда я пытаюсь выбрать адрес из списка с помощью переключателя и сохранить в localstorage, в результате я получаю null.

Как это исправить?

HTML:

    <form [formGroup]="form">
    <ion-list>
      <ion-radio-group formControlName="pickup_points_id">
        <ion-item *ngFor="let pickuppoint of pickuppoints">
          <ion-label>{{pickuppoint.address}}</ion-label>
          <ion-radio slot="start" [value]="pickuppoint.pickup_point_id" (click)="onSelectPickupPoint()"></ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>
  </form>

ts:

  onSelectPickupPoint() {
    localStorage.setItem('selectedPickupPoint', this.form.value.pickup_points_id);
    console.log(localStorage.getItem('selectedPickupPoint'))
  }

Комментарии:

1. попробуйте поместить код onSelectPickupPoint в a setTimeout(() => {}) просто для того, чтобы убедиться, что событие щелчка обработано правильно, прежде чем сохранять значение. Остальная часть вашего кода выглядит нормально. Другой вещью может быть инициализация this.form поля

2. @bvdb Хм. а если установить Timeout, то все работает.

3. @bvdb Может быть, можно как-то избавиться от setTimeout?

4. попробуйте (change) событие. Я думаю, что это вызывается после обработки события, фактически изменяя форму. Но это немного непредсказуемо, потому что это немного зависит от типа элемента формы. Кроме того, я думаю (change) , что событие иногда вызывается несколько раз, например, при потере фокуса после редактирования поля ввода. Что может не быть проблемой в вашем случае.

Ответ №1:

Проблема в том, что значение еще не обработано. (click) Событие срабатывает непосредственно перед обновлением формы. Это фактически дает вам контроль над событием. Например, это дает вам возможность отменить событие. (например, путем передачи $event функции в коде вашего шаблона и вызова e.stopPropagation() метода).

Итак, если вы выполните код с помощью a setTimeout , он фактически будет исправлен, потому что сначала будет обработано событие. Это позволяет ему обновлять форму с новым значением. Наконец, когда время ожидания будет обработано this.form.value.pickup_points_id , будет сохранено правильное значение.

Другим решением может быть использование (change) вместо этого события, которое будет запущено после изменения значения.

Ответ №2:

Вы можете попробовать это:

 (click)="onSelectPickupPoint($event.target.value)"

.ts:

 onSelectPickupPoint(point_id: number) {
  localStorage.setItem('selectedPickupPoint', point_id);
}

Это работает для ввода текста. попробуйте это на радио и посмотрите.