Флажок сохранения установлен, когда страница перезагружается или посещается позже в Angular

Question

У меня есть флажок в моем компоненте:

<input (change)="fieldChange($event)" type="checkbox" />

Я хочу, чтобы он все еще был отмечен / снят, когда вы посетите этот компонент позже или перезагрузите страницу. Так что это в основном должно быть сохранено, я думаю? Очень плохо знаком с Angular и искал в течение 2 часов, но не нашел ничего работающего.

Это машинопись, которая у меня пока есть:

  public fieldChange(values: any){
    if (values.currentTarget.checked){
      console.log('hi');
    }
  }

И я вижу, что это работает, но это также необходимобыть проверенным и сохраненным. Может кто-нибудь помочь мне?

Answer 1

Вы можете использовать куки для хранения таких небольших конфигураций. Сначала свяжите ввод с переменной.

component.html :

<input (change)="fieldChange($event)" type="checkbox" [(ngModel)]="isChecked"/>

Напишите две функции для записи и чтения файлов cookie и использования их в службе.

cookie.service.ts :

getCookie(name : string): string{
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");    
    if (parts.length == 2) {
        return parts.pop().split(";").shift();
    }
}

setCookie(name : string, val : string){
    const date = new Date();
    const value = val;
    date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
    document.cookie = name+"="+value+"; expires="+date.toUTCString()+"; path=/";
}

Чтение куки при инициализации компонента. При изменении значения флажка переписать значение cookie.

component.ts :

ngOnInit(){
    // Other code
    isChecked = this.cookieService.getCookie('isChecked');
}

public fieldChange(values: any){
    // Other code
    this.cookieService.setCookie('isChecked',isChecked);
}