js实现免登陆效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户名:<input type="text"><br/>
密&nbsp;&nbsp;&nbsp;&nbsp;码:<input  type="password"><br/>
<input  type="checkbox">七天免登陆
<input type="button" value="登录">
<script type="text/javascript">
    //获取到所有的input元素
    var aInput = document.getElementsByTagName("input");
    //在进入页面的时候就开始判断cookie中是否有username,如果有,直接将用户名和对应的密码填入对应位置
    if(getCookie("username")){
        aInput[0].value = getCookie("username");
        aInput[1].value= getCookie("password");
        //console.log(aInput[0].value,aInput[1].value);
    }
    //在点击登录按钮时判断是否选择了七天免登陆复选框,如果选择,就将用户名和密码创建cookie保存
    aInput[3].onclick = function(){
        var username = aInput[0].value;
        var password = aInput[1].value;
         if(aInput[2].checked){
             setCookie("username",username,7);
             setCookie("password",password,7);
         }
    }



    //创建cookie函数,传入的参数为cookie名,cookie值,以及该cookie有效期
    function setCookie(name,value,day){
        //创建一个系统时间
        var oDate = new Date();
        //设置cookie的有效期为当前日期+day
        oDate.setDate(oDate.getDate() + day);
        document.cookie = name + "=" + value + ";expires=" + oDate;
    }
    //获取cookie函数

    function getCookie(name){
        //获取页面所有cookie,根据页面cookie格式将cookie用; 分割开(必须是; 因为document.cookie输出的格式就是; 只是;隔开会出错)
        console.log(document.cookie);
        var cookieArray1 = document.cookie.split("; ");
        //遍历所有的cookies查找是否有cookie名为name的,有则返回其对应的value
        for(var i = 0 ;i< cookieArray1.length;i++){
            //每个cookie都是name = value的格式;所以用=将每个cookie分割开从而方便获取name和传入的参数对比,以便找到对应的value
            var cookie1 = cookieArray1[i].split("=");
             if(cookie1[0] == name){
                 return cookie1[1];
             }
        }
    }

    function  removeCookie(name){
        setCookie(name,1,-1);
    }

</script>
</body>
</html>

版权声明:本文为qq_39305143原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。