登录时记住密码的实现

涂涂-ing

已于 2022-01-24 09:35:56 修改

阅读量2.2w

点赞数 20

分类专栏： Jquery 文章标签： cookie

于 2019-06-20 16:44:11 首次发布

本文链接：https://blog.csdn.net/qq_41320105/article/details/93061340

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目中基本上登录是必不可少的一步，对此，在登录时选择记住密码这一功能也是不错的选择。所以，前段时间要我实现记住密码这个功能，我就写了一个demo出来。

思路：记住密码这个功能其实和普通浏览器记住密码功能是查不多的，主要是通过cookie来实现的。
1、引入文件

<script type="text/javascript" src="<%=request.getContextPath()%>/./js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap3/js/jquery.cookie.js"></script>

说明：jquery.cookie.js这个可以去网上下载。然后引用文件中，必不可少的一个引入文件，另外jquery这个文件也很重要，它俩必须搭配一起使用。jquery可以引用你们项目中的有都行。

2、话不多说上代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/./js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap3/js/jquery.cookie.js"></script>
</head>
<body onload="getCookie();" >
<table>
<h3>用户名：<input type="text" id="userName" name="userName"></h3>
<h3>密码：<input type="password" id="passWord" name="passWord"></h3>
<input type="checkbox" name="rememenber" id="rememenber">：记住密码<br/>
<input type="submit" value="提交" onclick="tologin()">
</table>
</body>
<script type="text/javascript">
	//把信息设置进去Cookie里面去
	function setCookie(){
		var userName = $('#userName').val();
		var passWord = $('#passWord').val(); 
		var aa = $("input[type='checkbox']").is(":checked");//获取是否选中
		if(aa==true){//如果选中-->记住密码登录
			// $.cookie("userName",userName.trim(),7);//有效时间7天，也可以设置为永久，把时间去掉就好
			$.cookie("username",username.trim(),{ expires: 7 }); //网友说这个才是正确的设置有效时间、
			$.cookie("passWord",passWord.trim(),7);
		}else{//如果没选中-->不记住密码登录
			 $.cookie("passWord", "");
			 $.cookie("userName", "");
			alert("没有记住密码")
		}  
	}
	
	
	  function getCookie(){ //获取cookie    
         var userName = $.cookie("userName"); //获取cookie中的用户名    
         var pwd =  $.cookie("passWord"); //获取cookie中的登陆密码    
         if(pwd){//密码存在的话把“记住用户名和密码”复选框勾选住    
            $("[name='rememenber']").attr("checked","true");    
         }    
         if(userName!=""){//用户名存在的话把用户名填充到用户名文本框    
            $("#userName").val(userName);    
         }else{
        	 $("#userName").val("");
         }
         if(pwd!=""){//密码存在的话把密码填充到密码文本框    
        	  $("#passWord").val(pwd); 
         }else{
        	 $("#passWord").val(""); 
         }
    } 
	  
	  //登录
	  function tologin(){
		var userName = $('#userName').val();
		var passWord = $('#passWord').val(); 
		var aa = $("input[type='checkbox']").is(":checked");//获取选中状态
		    if(userName == ''){    
		        alert("请输入用户名。");    
		        return;    
		    }    
		    if(passWord == ''){    
		        alert("请输入密码。");    
		        return;    
		    }  
		    if(aa==true){
				setCookie();   //调用设置Cookie的方法 
		        window.location = "<%=request.getContextPath()%>/supplier-list"; 
			}else if(aa==false){
				setCookie();  //调用设置Cookie的方法   
		        window.location = "http://www.baidu.com";  
			}

	  }
</script>
</html>

这里有注释，可以自己看，js里面的代码关于以下这段代码，一定要在其加载页面的时候加载，不然就无法读取cookie，也就是无法把值传给文本框去了。


	  function getCookie(){ //获取cookie    
		 alert("页面")
         var userName = $.cookie("userName"); //获取cookie中的用户名    
         var pwd =  $.cookie("passWord"); //获取cookie中的登陆密码    
         if(pwd){//密码存在的话把“记住用户名和密码”复选框勾选住    
            $("[name='rememenber']").attr("checked","true");    
         }    
         if(userName!=""){//用户名存在的话把用户名填充到用户名文本框    
            $("#userName").val(userName);    
         }else{
        	 $("#userName").val("");
         }
         if(pwd!=""){//密码存在的话把密码填充到密码文本框    
        	  $("#passWord").val(pwd); 
          //  $("#passWord").val($.base64.decode(pwd));   
         }else{
        	 $("#passWord").val(""); 
         }
    }

以上就是记住密码的功能实现，其实超级简单的。

涂涂-ing

关注

20
点赞
踩
91

收藏

觉得还不错? 一键收藏
7
评论
登录时记住密码的实现

项目中基本上登录是必不可少的一步，对此，在登录时选择记住密码这一功能也是不错的选择。所以，前段时间要我实现记住密码这个功能，我就写了一个demo出来。思路：记住密码这个功能其实和普通浏览器记住密码功能是查不多的，主要是通过cookie来实现的。1、引入文件<script type="text/javascript" src="<%=request.getContextPath(...
复制链接

扫一扫

专栏目录