时间戳

首页 > 解决方案 > 记住浏览器后退按钮上最后选择的单选按钮

javascript - 记住浏览器后退按钮上最后选择的单选按钮

问题描述

我有三个单选按钮。

我希望浏览器记住最后选择/选中的单选按钮，而我用来浏览浏览器后退按钮。

我已经将值存储在本地存储中。

问题和流程，

想要解决这个问题：如何动态设置一些东西来记住单选按钮上的最后一次点击事件？

HTML

<div class="row mb-3">
    <div class="col-10 form-inline justify-content-xl-center">

        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="filterClient" id="filterClientes1" value="activeClient" checked="checked"
                (change)="statusCustomers = '1'">
            <label class="form-check-label" for="filterClient1" i18n="Filter | Customers 
                            filter.@@filter_actives">
                <b>Active Customers</b>
            </label>
        </div>

        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="filterClient" id="filterClient2" value="inactiveClient" (change)="statusCustomers = '0'">
            <label class="form-check-label" for="filterClient2" i18n="Filter | Customers 
                            filter.@@filter_inactives">
                <b>Inactive Customers</b>
            </label>
        </div>

        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="filterClient" id="filterClient3" value="allClient" (change)="statusCustomers = '2'">
            <label class="form-check-label" for="filterClient3" i18n="Filter | Customers 
                            filter.@@filter_all">
                <b>All Customers</b>
            </label>
        </div>
    </div>
</div>

打字稿

  filterCustomer(fieldValue: string, statusCustomers: string, statusQueries: string) {
// * REMOVE WHEN WE'RE DONE
statusQueries = '1';
this.restartFields();
const swalWithBootstrapButtons = Swal.mixin({
  customClass: {
    confirmButton: 'btn btn-primary',
    cancelButton: 'btn btn-outline-secondary ml-4'
  },
  buttonsStyling: false
});
this.filteredCustomer = [];
if (fieldValue === '') {
  this.showspinner = false;
  this.searchError = 'You must enter a search';
} else {
  this.searchError = '';
  this.showspinner = true;
  this.customerService.getCustomers(fieldValue, statusCustomers, statusQueries).subscribe(data => {
    if (data.length === 0) {
      this.nullError = 'No customer related search found';
    }
    localStorage.setItem('filterField', JSON.stringify(fieldValue));
    localStorage.setItem('radiobuttonsCustomers', JSON.stringify(this.statusCustomers));

    data.map(item => {
      this.filteredCustomer.push(item);
      localStorage.setItem('customers', JSON.stringify(this.filteredCustomer));
       });
    this.showspinner = false;
    this.paginationDisplayed = this.filteredCustomer.length > environment.DTSize;
    this.initializeDT();
  }, error => {
    swalWithBootstrapButtons.fire(
      'Error!',
      'Error Not Applicable.',
      'error'
    );
  });
  this.customers = this.filteredCustomer;
  }

}

标签： javascriptangularbrowserback-button

解决方案

您以这种方式更改检查的状态

[checked]="variable_name"

这里的变量应该是布尔值。

还要在生命周期钩子中的 ngOnInit 中写入以下行

variable_name = JSON.parse(localstorage.getItem('fieldName_in_localStorage'))

推荐阅读