我创建了一个登录表单,如果用户在登录时选中了记住复选框,则会将凭据保存到浏览器的本地存储中。
如果用户尝试再次登录,则应填写用户详细信息,类似于自动完成;因此,如果用户输入姓名的几个字母,则姓名和密码应自动填写到表单中。
我没有为此提供的后端API,因此我需要在前端进行操作。
如果记住复选框处于活动状态,则将数据(用户名,密码)存储在本地会话中是可行的,但是自动填充无效。我该如何运作?
我的jsfiddle是here
$(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', '');
}
});
});
<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>