登录页面Cookie的写法！

叁歲伎倆 2022-06-17 14:16 166阅读 0赞

**现象：**

登录页面增加Cookie增强用户体验.在用户进行账号密码输入之后将账号密码写入Cookie中！

**解决办法：**

1：页面输入框：增加一个checkbox选择框是否记住密码！

![这里写图片描述][SouthEast]

2：在js页面增加填入Cookie

![这里写图片描述][SouthEast 1]

3：写入Cookie的get和set方法

![这里写图片描述][SouthEast 2]  
![这里写图片描述][SouthEast 3]

4:使用Cookid

![这里写图片描述][SouthEast 4]

$(function(){
    //填入cookie
    var username=GetCookie("userName");
    if(username!=null && username.trim()!=""){
        $("#username").val(username);
        var password=GetCookie(username);
        if(password!=null && password.trim()!=""){
            var length=password.length;
            $("#password").val(password);
        document.getElementById("remember1").checked=true;
        }else{
            $("password").focus();
        document.getElementById("remember1").checked=false;
        }
    }else{
        $("#username").focus();
    }
    });  
    
    function GetCookie(name){
    var cookieValue = "";
    var search = escape(name) + "=";
    if(document.cookie.length > 0){  
    offset = document.cookie.indexOf(search);
        if (offset != -1){  
            offset += search.length;
            end = document.cookie.indexOf(";", offset);
            if (end == -1)
                end = document.cookie.length;
          cookieValue = decodeURIComponent((document.cookie.substring(offset, end)))
        }
    }
    return cookieValue;

function SetCookie(name,value,hours,path,domain,secure{   
        var expire = "";
        var pathstr = "";
        var domainstr = "";
        var securestr = "";
        if(hours != null){
            expire = new Date((new Date()).getTime() + hours * 3600000);
            expire = "; expires=" + expire.toGMTString();
        }
        if(path != null)
           pathstr = "; path=" + path;
        if(domain != null)
           domainstr = "; domain=" + domain;
        if(secure != null)
           securestr = "; secure"
        var c = name + "=" + escape (value) +  expire + pathstr + domainstr + securestr;
        document.cookie = c;
    }

[SouthEast]: /images/20220617/46e48e42f7d047bebff2c3c8c28f27c4.png
[SouthEast 1]: /images/20220617/47695c9680e44e59ba5aa6c9c3c7a9c6.png
[SouthEast 2]: /images/20220617/0bbe09b547d143f0814106d31165c7fa.png
[SouthEast 3]: /images/20220617/3be7e4f0ae25452991bb7d3cae6b17fa.png
[SouthEast 4]: /images/20220617/2c70e5a36f2f4c2c9b6615ff61e31bad.png