HTML5 localstorage在登录框中记住我

Question

我有一个功能,一旦单击记住我复选框,将用户名和密码存储在本地存储中.到目前为止它工作正常,但该功能仅在用户在输入字段中输入他/她的用户名和密码然后单击"记住我"复选框时才有效.

所以总之有两种情况:

1)输入用户名和密码 - >点击记住我复选框 - >提交表格(工作正常)

2)点击记住我复选框 - >输入用户名和密码 - >提交表格(不工作 - 显示空白字段.)

如何修改我的功能,并确保如果用户点击"先记住我"复选框,然后输入用户名和密码,则会在页面刷新时或用户再次返回网站时填写字段.

这是我的功能看起来像:

$(function() {

    if (localStorage.checkBoxValidation && localStorage.checkBoxValidation != '') {
        $('#rememberMe').attr('checked', 'checked');
        $('#loginEmail').val(localStorage.userName);
        $('#password').val(localStorage.password);
    } else {
        $('#rememberMe').removeAttr('checked');
        $('#loginEmail').val('');
        $('#password').val('');
    }

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

        if ($('#rememberMe').is(':checked')) {
            // save username and password
            localStorage.userName = $('#loginEmail').val();
            localStorage.password = $('#password').val();
            localStorage.checkBoxValidation = $('#rememberMe').val();
        } else {
            localStorage.userName = '';
            localStorage.password = '';
            localStorage.checkBoxValidation = '';
        }
    });
});

Answer 1

您不应该听取特定表单元素的单击事件,而应该听取表单的提交事件.

提交表单时,您可以获得手头所有字段的信息以及用户填写表单字段的顺序无关紧要.

$('#my-form').on('submit', function() {
    /* place your logic here… */
});