Cookie实现记住密码、自动登录

前端代码

<form id="form" action="xxx" method="post">
    <div>
        <input type="text" name="account" id="account" placeholder="账号">
        <input type="text" name="pwd" id="pwd" placeholder="密码">
    </div>
    <div>
        <ul>
            <li>
                <label>
                    <input type="checkbox" name="checkbox" value="1" checked="checked" />
                    <span></span>
                </label>
                记住密码
            </li>
            <li>
                <label>
                    <input type="checkbox" name="checkbox" value="2" />
                    <span></span>
                </label>
                自动登录
            </li>
        </ul>
    </div>
</form>
<a href="javascript:login()">登 录</a>

<script type="text/javascript">
    function login() {
        $("#form").submit();
    }

    //加载页面后加载次函数
    $().ready(function() {// 记住密码功能
        var str = decodeURIComponent(document.cookie.split(';')); // 获取Cookie
        alert(str);
        // 以下是Cookie数据处理逻辑
        // 不同的项目存储的Cookie不同,处理数据的逻辑不同
        // 要根据具体的Cookie值来截取账号、密码
        if (str.indexOf("loginInfo")>-1) {
            var arr = str.split(",");
            var loginInfo = arr[1];
            var arr = loginInfo.split("+");
            var name = arr[0];
            name = name.substring(name.lastIndexOf("=", name.length - 1) + 1);
            var phone = arr[1];

            //自动填充用户名和密码
            $("#name").val(name);
            $("#phone").val(phone);
        }
    });
</script>

后端代码

 1 // 获取多选框(checkbox)的值
 2 String[] checkbox = request.getParameterValues("checkbox");
 3 
 4 // 判断是否勾选功能
 5 if (checkbox != null) {// 已勾选功能
 6     for (String str : checkbox) {
 7         // 判断是否勾选记住密码功能
 8         if (str.equals("1")) {
 9             // 组合登录信息
10             String loginInfo = name + "+" + phone;
11             // 将登陆信息编码
12             loginInfo = URLEncoder.encode(loginInfo, "UTF-8");
13             // 创建Cookie
14             Cookie userCookie = new Cookie("loginInfo", loginInfo);
15             // 设置Cookie存活期限
16             userCookie.setMaxAge(30*24*60*60);//设置存活期一个月
17             // 设置所有路径下共享Cookie
18             userCookie.setPath("/");
19             // 添加Cookie到服务器响应中
20             response.addCookie(userCookie);
21         }
22         // 判断是否勾选自动登录功能
23         if (str.equals("2")) {
24             session.setAttribute("agent", agent);
25         }
26     }
27 } else {// 未勾选功能,或取消勾选功能,删除Cookie信息
28     String loginInfo = name + "+" + phone;
29     loginInfo = URLEncoder.encode(loginInfo, "UTF-8");
30     Cookie userCookie = new Cookie("loginInfo", loginInfo);
31     userCookie.setMaxAge(0);//删除cookie,只需要将失效时间设置为0即可,其他步骤一样
32     userCookie.setPath("/");
33     response.addCookie(userCookie);
34 }
35 // 在测试中可能会出现一些问题,清除掉Cookie重新添加,在测试。

 

posted @ 2018-02-22 12:32  有悟还有迷  阅读(3166)  评论(0编辑  收藏  举报