JavaServlet与JS一起实现用户名保存功能

本期给大家介绍的是JavaSerlvet与JS代码一起实现的一个用户名保存的功能，这个功能的代码实现不是很难，但是很容易忘记，所以在这里发表，以便于自己能够快速找到，也方便大家可以共同学习进步。

1.jsp页面代码

<table width="85%" border="0" cellspacing="0">
    <tr>
    <td>
 <div id="logindiv">
 <table width="100%" border="0" cellspacing="0">
    <tr>
 <td style="text-align:center; padding-top:20px"><img
 src="images/logintitle.gif" width="150" height="30" />
</td>
</tr>
    <tr>
  <td style="text-align:center;padding-top:20px;"><font
 color="#ff0000">${requestScope["register_message"]}</font>
</td>
                    </tr>
                    <tr>
                        <td style="text-align:center">
                            <table width="80%" border="0" cellspacing="0"
                                style="margin-top:15px ;margin-left:auto; margin-right:auto">
                                <tr>
                                    <td
                                        style="text-align:right; padding-top:5px; width:25%">用户名：</td>
                                    <td style="text-align:left"><input name="username" id="username"
                                        type="text" class="textinput" />
                                    </td>
                                    <span style="color: red">${login_err}</span>
                                </tr>
                                <tr>
                                    <td style="text-align:right; padding-top:5px">密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
                                    <td style="text-align:left"><input name="password"
                                        type="password" class="textinput" />
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="text-align:center">
                                        <input
                                        type="checkbox" name="remember" id="remember" value="true" />
                                        记住用户名&nbsp;&nbsp;
                                        <input type="checkbox"
                                        name="autoLogin" value="true" /> 自动登录</td>
                                </tr>
                                <tr>
                                    <td colspan="2"
                                        style="padding-top:10px; text-align:center"><input
                                        name="image" type="image" onclick="return formcheck()"
                                        src="images/loginbutton.gif" width="83" height="22" />
                                    </td>
                                </tr>

                                <tr>
                                    <td colspan="2" style="padding-top:10px"><img
                                        src="images/loginline.gif" width="241" height="10" />
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"
                                        style="padding-top:10px; text-align:center"><a
                                        href="register.jsp"><img name="image"
                                            src="images/signupbutton.gif" width="135" height="33" />
                                    </a></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

代码如上图，做这个功能，首先我们要了解Cookie这个东西，CookieCookie 并不是它的原意“甜饼”的意思, 而是一个保存在客户机中的简单的文本文件, 这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。

意思就是他能够把我们的账号密码保存在本地的服务器，所以我们可以利用这点实现这个功能。

1.我们需要在用户登入成功后把用户名和记住用户名的选框的值保存在本地cookie

  //登入成功后，对记住用户名选框的值进行判断，如果传进来有值就进行下面的步骤
            if("true".equals(remember)) {
                //保存用户名的值
                Cookie ck1=new Cookie("username",username);
                //保存记住用户名选框的值
                Cookie ck2=new Cookie("remember",remember);
                //设置cookie的存活时间
                ck1.setMaxAge(60*60*365);
                ck2.setMaxAge(60*60*365);
                //上传到服务器
                response.addCookie(ck1);
                response.addCookie(ck2);
                //如果登入的时候没有把记住用户名的选框打勾就把保存的cookie清除
            }else{
                Cookie[] cookies=request.getCookies();
                if(cookies != null){
                    for (Cookie c: cookies){
                        c.setMaxAge(0);
                        response.addCookie(c);
                    }
                }
            }

2.然后我们需要在需要保存用户名的界面写js代码

 

<script>
    //通过js代码获取Cookie
    //根据key获取Cookie的值
    function getCookieValue(key) {
        var cookie = document.cookie;//因为我们获取到的cookie是用‘; '号分开的所以我们要把它给拆分
        //2.拆分我们获取的cookie
        var cks = cookie.split("; ")
        //3.遍历我们的cks集合
        for (var i = 0; i < cks.length; i++) {
            //这里我们获取到的字符串是xx=xx的形式，因此我们还需要拆分
            var ckArr = cks[i].split("=");
            //取出我们的key和value
            var name = ckArr[0];
            var value = ckArr[1];
            console.log(key == name)
            //判断我们传进来的key的值,然后返回value
            if (key == name) {
                return value;
            }
        }
    }

    window.onload = function () {
        //先从cookie里面取得value的值，判断一下是否需要记住用户名
        var remember = getCookieValue('remember');
        if (remember == 'true') {
            //如果需要记住用户名，则勾选选择框，把值传到用户名文本框
            document.getElementById('remember').checked = 'checked';
            var username = getCookieValue('username');
            document.getElementById('username').value = username;
        }
    }

这样我们的功能就实现了！！！！