刷新页面刷新后复选框应保持选中状态答案

【问题标题】：checkbox should remains checked after refresh the page refresh刷新页面刷新后复选框应保持选中状态
【发布时间】：2021-04-24 17:59:11
【问题描述】：

所以我在这里使用复选框来隐藏和显示模板。我只想要在 Angular 9 页面刷新后使复选框保持选中状态的代码。请帮助我。

【问题讨论】：

标签： angular6 angular7 angular8 angular9

【解决方案1】：

你可以做两件事：

使用 RxJS，一旦选中复选框，您就可以使用 Behavior Subject 来存储数据并在重新加载或刷新事件时，读取行为主题并修补值
使用 sessionStorage，并执行相同的操作。一旦选中，将其存储在 sessionStorage 中，重新加载时，尝试从 sessionStorage 中读取并再次修补该值。

实施：

// Using session storage

someForm.controls.checkboxFormControl.valueChanges.subscribe(
  data => {
    if (data) {
        sessionStorage.setItem('checkboxChecked', true)
    }
})

onRefreshEvent() {
 let sessionStorageValue = sessionStorage.setItem('checkboxChecked'); 
 if (sessionStorageValue && (sessionStorageValue === true)) {
    this.someForm.contols.checkBoxControl.patchValue(true)
 }
}


//// Same with Behavior Subject as well

// Create a Behavior Subject in your Service file
checkboxCheckedSource: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
checkBoxObservable: Observable<boolean> = this.checkboxCheckedSource.asObservable();

setCheckboxValue(checked: boolean) {
  this.checkboxCheckedSource.next(checked);
}

getCheckboxValue(): Observable<boolean> {
  return checkBoxObservable;
}

// In your component.ts file

someForm.controls.checkboxFormControl.valueChanges.subscribe(
  data => {
    if (data) {
        this.yourService.setCheckboxValue(true)
    }
})

onRefreshEvent() {
  this.yourService.getCheckboxValue().subscribe(checked => {
    if (checked) {
       this.someForm.contols.checkBoxControl.patchValue(true);
    }
  })
}

如果它只有一个复选框，我更喜欢 sessionStorage 的方式，否则如果你要存储很多复选框，请使用 BehaviorSubject！！

【讨论】：