Запомнить меня функция автозаполнения не работает с помощью jquery

Question

$(function() {

  if (localStorage.chkbx && localStorage.chkbx != '') {
    $('#modal_login_remember').attr('checked', 'checked');
    $('#modal_login_email').val(localStorage.usrname);
    $('#modal_login_password').val(localStorage.pass);
  } else {
    $('#modal_login_remember').removeAttr('checked');
    $('#modal_login_email').val('');
    $('#modal_login_password').val('');
  }

  $('#modal_login_remember').click(function() {

    if ($('#modal_login_remember').is(':checked')) {
      // save username and password
      localStorage.usrname = $('#modal_login_email').val();
      localStorage.pass = $('#modal_login_password').val();
      localStorage.chkbx = $('#modal_login_remember').val();
    } else {
      localStorage.usrname = '';
      localStorage.pass = '';
      localStorage.chkbx = '';
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <p style="text-align: center"><i>Enter your email ID and password to log in to Help.</i></p>

  <div id="errormsg" style="display: none; color:red;text-align: center; padding-bottom: 1.2rem;"> Invalid token or login credentials, please log in again.</div>
  <div class="input-group">
    <span class="input-group-addon">
      <i class="fa fa-envelope"></i>
    </span>
    <input type="email" id="modal_login_email" name="modal_login_email" class="form-control" placeholder="Enter email" />
  </div>
</div>
<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">
      <i class="fa fa-unlock-alt"></i>
    </span>
    <input type="password" id="modal_login_password" name="modal_login_password" class="form-control" placeholder="Password" />
  </div>
</div>
<label class="custom-control custom-checkbox">
  <input type="checkbox" id="modal_login_remember" class="custom-control-input" />
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Remember me</span>
</label>

<div class="modal-footer">
  <input type="button" onclick="login(document.getElementById('modal_login_email').value,document.getElementById('modal_login_password').value);" class="btn btn-primary" value="Login" style="background-color: #19659d; border-color: #19659d;" />
</div>

Если пользователь нажимает флажок запомнить во время входа в систему, данные должны быть сохранены в localstorage.Если пользователь пытается войти снова, данные пользователя должны автоматически заполняться (если пользователь вводит несколько букв своего имени, имя и пароль должны заполняться автоматически).Для него нет API, поэтому мне нужно сделать это из внешнего интерфейса.

Значение хранится в локальном хранилище, но автозаполнение не работает, пока он не подходит.

Answer 1

Вы можете использовать этот код, и вы можете определить локальное хранилище как объект, который было бы неплохо иметь.

 $(function() {
  if (localStorage.chkbx && localStorage.getItem(chkbx) !=='') {
    $('#modal_login_remember').attr('checked', 'checked');
    $('#modal_login_email').val(localStorage.getItem(usrname));
   $('#modal_login_password').val(localStorage.getItem(pass));
   } else {
      $('#modal_login_remember').removeAttr('checked');
      $('#modal_login_email').val('');
      $('#modal_login_password').val('');
  }

 $('#modal_login_remember').click(function() {

if ($('#modal_login_remember').is(':checked')) {
  // save username and password
  localStorage.setItem('usrname',$('#modal_login_email').val());
  localStorage.setItem('pass',$('#modal_login_password').val());
  localStorage.setItem('chkbx', $('#modal_login_remember').val());
} else {
  localStorage.setItem('usrname', '');
  localStorage.setItem('pass', '');
  localStorage.setItem('chkbx', '');
}
});
});