记住登录状态功能实现

获取cookie指定值函数:

function get_cookie(key) {
        var _cookie = document.cookie;
        var arr = _cookie.split(';')[0].split(',');
        for(var i=0;i<arr.length;i++){
            var kv = arr[i].split('=');
            if(key == kv[0]){
                //要获取的cookie值的键存在
                return kv[1];
            }
        }
        //否则不存在
        return "error";
    }

记住密码代码(不安全做法):

 1 var is_check;
 2 
 3     $('input[name="rememberme"]').click(function(){
 4         // var checked = $('input[name="rememberme"]').attr('checked');//attr获取不到
 5         var checked = $("input[type='checkbox']").prop("checked") ;//判断是否勾选
 6         if(checked){
 7             var name = $('input[name="user_name"]').val();
 8             //密码不存在cookie中,不安全,我只获取密码长度,然后伪造一个相同长度的值填充到密码区域
 9             var pwd = $('input[name="user_pass"]').val();
10             var pwdlen = pwd.length;
11             //cookie中可以设置一个变量标记是否选中的状态
12             is_check = 1; //当再次登录的时候,若为1,则复选框为勾选状态,填充文本框,若为0则用户手动输入密码等
13             document.cookie = "user_name="+name+",user_pass="+pwd+",is_check="+is_check;
14             // alert(name);
15         }else{
16             is_check = 0;
17             document.cookie = "user_name= ,user_pass= ,is_check="+is_check;//key-value部分不能使用;分割?
18         }
19     });
20 
21     //读取cookie,检测是否勾选
22     // var _cookie = document.cookie;
23     // console.log(_cookie);
24     // var username = get_cookie('user_name');
25     // console.log(username);
26     //获取cookie指定值,只能自己分割得到。
27     function get_cookie(key) {
28         var _cookie = document.cookie;
29         var arr = _cookie.split(';')[0].split(',');
30         for(var i=0;i<arr.length;i++){
31             var kv = arr[i].split('=');
32             if(key == kv[0]){
33                 //要获取的cookie值的键存在
34                 return kv[1];
35             }
36         }
37         //否则不存在
38         return "error";
39     }
40 
41     function getCookie(){ //获取cookie
42         if(get_cookie('is_check') == 1){
43             var name = get_cookie('user_name');
44             var pass = get_cookie('user_pass');
45             //填充信息到表单
46             $('input[name="user_name"]').val(name);
47             $('input[name="user_pass"]').val(pass);
48             $("input[type='checkbox']").prop("checked",'checked');
49         }else{
50             var name = get_cookie('user_name');
51             var pass = get_cookie('user_pass');
52             //填充信息到表单
53             $('input[name="user_name"]').val('');
54             $('input[name="user_pass"]').val('');
55             $("input[type='checkbox']").prop("checked",'');
56         }
57     }
View Code

html代码需要在页面记载完毕的时候触发getcookie函数判断是否需要填充密码,用到onload事件。

<body class="login login-action-login wp-core-ui  locale-zh-cn" onload="getCookie();">

 相对安全做法:https://blog.csdn.net/cuijinquan/article/details/18351251

Cookie最好只能用于一次验证(在一次成功验证后即删除或重新生成);Cookie需在一周内(或更少)过期

原文地址:https://www.cnblogs.com/bneglect/p/11017096.html