Web 实现登录记住密码功能

大家好，欢迎来到IT知识分享网。

HTML

<form id="nameLoginForm">
    账户名：<input type="text" name="name" id="name" class="input-text" autocomplete="off" placeholder="用户名/邮箱/手机号" />
    密码：<input type="password" name="password" id="password" class="input-text" placeholder="请输入密码">
    <input id="normalSubmit" class="btn-settlement" type="button" onclick="login()" value="登录"  >
    <span class="register"><input name="remember" type="checkbox" id="remember" class="rem-check">记住密码</span>
    <span class="forget-pass"> <input name="admin" type="checkbox" id="admin">管理员登录</span>
</form>

JS

<script type="text/javascript">
    //记住用户名,默认不记住
    var checkFlag = false;
    function remeberNameAndPwd(){
        //这里是当页面是从注册页面注册成功过来
        var remFlag = $("#remember").is(':checked');
        if(remFlag==true){
            checkFlag = true;
        }
        //当在login.html页面点击是否记住z
        $("#remember").click(function(){
            var remFlag = $("#remember").is(':checked');
            if(remFlag==true){
                $("#remember").attr("checked",true);
                checkFlag=true;
            }else{
                $("#remember").attr("checked",false);
                checkFlag=false;
            }
        })
    }

    //写入cookie与删除
    function setAndRemoveCookie(){
        //注意 密码写入cookie的时候这里没有写加密 是不安全的
        if(checkFlag){
            var name = $("#name").val();
            var password = $("#password").val();
            $.cookie("remember","true",{expires : 7 })//单位：天
            $.cookie("name",name,{expires: 7 });
            $.cookie("password",password,{expires: 7 })
        }else{
            //删除cookie
            $.cookie("remember","false",{expires:-1 });
            $.cookie("name",null,{expires:-1});
            $.cookie("password",null,{expires:-1});
        }
    }

    //获取cookie
    function getCookie(){
        if($.cookie("remember")=="true"){
            $("#remember").attr("checked",true);
            $("#name").val($.cookie("name"));
            $("#password").val($.cookie("password"));
        }
    }

    $(function(){
        getCookie();//获取cookie
        remeberNameAndPwd();//remember点击事件
    });

    //登录
    function login() {
        var name = $("#name").val()
        var password = $("#password").val();
        //是否管理员登录
        var remId;
        var remAdmin = $("#admin").is(':checked');
        if(remAdmin){
            remId='1';
        }else {
            remId='0';
        }

        if($(".tips ").is(":visible")){
            return;
        }
        if (name == "") {
            showError("请输入用户名");
            return;
        }
        if (password == "") {
            showError("请输入密码");
            return false;
        }
        $.ajax({
            url : 'login',
            type:'post',
            data : {
                name : name,
                password : password,
                remAdmin:remId
            },
            dataType : 'json',
            cache:false,
            success : function(d) {
                if ("0"==d.err) {
                    setAndRemoveCookie();//是否写入cookie
                    window.location.href = d.url;
                }else{
                    showError(d.msg);
                    return false;
                }
            }
        })
    }
</script>