JS与Cookie完成记住用户名和密码

最新推荐文章于 2021-07-25 19:08:46 发布

被风吹过的忧伤

最新推荐文章于 2021-07-25 19:08:46 发布

阅读量720

点赞数

分类专栏： servlet 文章标签： java

本文链接：https://blog.csdn.net/weixin_47891374/article/details/113244097

版权

servlet 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript与Cookie完成记住密码操作

前言引入

客户端(浏览器)的登录界面通过表单等操作发送一次HTTP请求给服务器，服务器会将前端传递的数据去数据库中查询用户数据。当第二次登录时如何不需要手动输入用户信息，而是已经自动将值存入，从而进行登陆呢？

记住密码操作的原理

当我们进入到登录界面时，可以创建一个JavaScript脚本引入到当前登录页面中，每次进入登陆界面时会执行脚本，而在我们的脚本中完成获取Cookie存储的值，从而通过前端相关知识将值赋值给对应的输入框即可。若没有用户登录，且是点击了记住密码操作的按钮提交给服务器的数据，那么服务器会将该数据通过构建Cookie对象将数据保存，便于前端页面中的预加载事件可以及时的完成赋值操作

前端页面

<html>
	<head>
		<title>login</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<!--引入记住密码的js脚本-->
		<script src="css/rem.js" type="text/javascript"></script>
	</head>

	<body>
		<div id="wrap">
			<div id="top_content">
				<div id="header">
					<div id="rightheader">
						<p>
							<!--显示日期-->
							<span id="time">123</span>
							<br />
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="#">Main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						login
					</h1>
					<form action="login" method="post">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<!--用户名输入框-->
							<tr>
								<td valign="middle" align="right">
									username:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="username" id="username"/>
								</td>
							</tr>
							<!--密码输入框-->
							<tr>
								<td valign="middle" align="right">
									password:
								</td>
								<td valign="middle" align="left">
									<input type="password" class="inputgri" name="pwd" id="password"/>
								</td>
							</tr>
							<!--记住密码的checkbox-->
							<tr>
								<td valign="middle" align="right">
									记住密码:
								</td>
								<td valign="middle" align="left">
									<input type="checkbox" class="inputgri" name="remb" id="remb" value="1"/>
								</td>
							</tr>
						</table>
						<p>
							<input type="submit" class="button" value="Submit &raquo;" />
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					rxx17362415996@sina.com
				</div>
			</div>
		</div>
	</body>
</html>

JavaScript脚本代码

//通过js获取cookie   k1=v1;k2=v2;k3=v3....
var cookies = window.document.cookie.split(";");

//封装一个函数：根据指定的key得到value值
function findCookie(KName) {
    //迭代cookies
    for (var i = 0; i < cookies.length;i++){
        //二次分割，得到键值对 k,v
        var kv = cookies[i].split("=");
        //判定 删掉空格 replace(" ","") 或trim()
        if (KName==kv[0].trim()){
            return kv[1].trim();
        }
    }
    return '';
}
//设定时间的函数
function getTime(){
    //创建日期对象
    var myDate=new Date();

    var year = myDate.getFullYear();//从 Date 对象以四位数字返回年份。
    var month = myDate.getMonth() + 1;//从 Date 对象返回月份 (0 ~ 11)
    var day = myDate.getDate();//从 Date 对象返回一个月中的某一天 (1 ~ 31)
    return year + "/" + month + "/" + day;
}

//加载自动调用
window.onload = function () {
    //设定日期
    //获取显示日期的span标签并设定内容
    document.getElementById("time").innerHTML = getTime();

    //根据用户名、密码、复选框的cookie  k值进行循环查找value值
    var username = findCookie("username");//用户名
    var password = findCookie("password");//密码
    var remb = findCookie("remb");//记住密码复选框
    
	//需要判断用户是否点击了记住密码的多选框
    if ("1" == remb){
        //给输入框赋值 解码
        document.getElementById("username").value = decodeURI(username,"utf-8");
        document.getElementById("password").value = decodeURI(username,"utf-8");
        document.getElementById("remb").checked = "checked";
    }
};

界面中的用户名、密码、记住密码三个的值通过name属性结合form表单将数据提交到 login 请求，其中的记住密码复选框很重要，是后台服务器是否存储用户数据的条件

后台代码

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    public void service(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException{
        //1、设置请求参数的编码 
        request.setCharacterEncoding("utf-8");
        //2、设置响应的数据类型与编码格式
        response.setContentType("text/html;charset=utf-8");
        //3、获取请求参数值(页面里面的name属性值)
        String username = request.getParameter("username");
        String password = request.getParameter("pwd");

        //获取是否勾选保存密码复选框操作
        String remb = request.getParameter("remb");//登录页面中传递的value值为1
        //判断用户是否点击的记住密码复选框
        if ("1".equals(remb)){
            //封装：记住密码操作
            rem_pwd(response,username,password,remb);
            //通过响应对象获取字符输出流向网页中写入内容
            response.getWriter().println("记住密码操作......");
        }
    }

    //封装：记住密码操作
    private void rem_pwd(HttpServletResponse response, String username, String password,String remb) throws UnsupportedEncodingException {
        Cookie userNameCookie = new Cookie("username", URLEncoder.encode(username,"utf-8"));
        Cookie passwordCookie = new Cookie("password",URLEncoder.encode(password,"utf-8"));
        Cookie rembCookie = new Cookie("remb",remb);

        //设置Cookie存活时间
        userNameCookie.setMaxAge(10*60);
        passwordCookie.setMaxAge(10*60);
        rembCookie.setMaxAge(10*60);

        //添加Cookie
        response.addCookie(userNameCookie);
        response.addCookie(passwordCookie);
        response.addCookie(rembCookie);
    }
}

运行过程

当进入login.html登录界面时会执行前端中的JavaScript脚本，而脚本中主要完成的操作是通过传入指定Cookie的key值获取对应的value属性值，从而通过id属性赋值给指定的输入框，达到记住用户名、密码操作

感谢大家的阅读，热爱分享的仓鼠，请大家多多指教，么么哒~~~~~

被风吹过的忧伤

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS与Cookie完成记住用户名和密码

JavaScript与Cookie完成记住密码操作前言引入记住密码操作的原理前端页面JavaScript脚本代码后台代码运行过程前言引入        客户端(浏览器)的登录界面通过表单等操作发送一次HTTP请求给服务器，服务器会将前端传递的数据去数据库中查询用户数据。当第二次登录时如何不需要手动输入用户信息，而是已经自动将值存入，从而进行登陆呢？记住密码操作的原理    &nbs
复制链接

扫一扫