周记(cookie记住密码功能)

最新推荐文章于 2024-08-09 13:37:05 发布

凌晨1点21分

最新推荐文章于 2024-08-09 13:37:05 发布

阅读量745

点赞数

分类专栏： web前端学习成长-生活记录文章标签： cookie 记住密码 js操作cookie 登录界面 js信息加密

本文链接：https://blog.csdn.net/cb2474600377/article/details/50426154

版权

学习笔记同时被 3 个专栏收录

58 篇文章 1 订阅

订阅专栏

web前端

24 篇文章 0 订阅

订阅专栏

学习成长-生活记录

17 篇文章 0 订阅

订阅专栏

登录中有一个记住密码的功能，这个项目是一个局域网项目，安全性要求不是很高，就准备把密码记录在本地的cookie中了，这里先了解了下cookie以及js对cookie操作，项目的代码

var b = new Base64();
function getCookie(name){
	var c = document.cookie;
	name = b.encode(name);
	if(c.length>0){
		var val_s = c.indexOf(name+"=");
		if(val_s!=-1){
			val_s = val_s + name.length + 1;
			val_e = c.indexOf(";",val_s);
			return b.decode(unescape(c.substring(val_s, val_e)));
		}
	}
	return "";
}
	
function setCookie(name,value,time){
	var date = new Date();
	var exp = ";expires=";
	name = b.encode(name);
	if(time==undefined||time==null||time<=0||isNaN(time)){
		date.setDate(date.getDate() - 1); //清除cookie
	}else{
		date.setDate(date.getDate() + time);
	} 
	document.cookie=name + "=" +b.encode(escape(value)) +  exp + date.toGMTString();
}

这里只是简单的操作了下cookie，能满足项目要求，更详细的cookie操作可以参考：http://www.cnblogs.com/shoupifeng/archive/2011/11/25/2263892.html，其中对于密码信息还是做了简单的加密处理，不能直接把明文密码放在cookie。这里使用的是base64可逆加密，页面中需要引入base64.js文件，encode()方法对信息进行加密，decode()方法对信息进行解密。这里关于加密处理相关的详情参考博文：

http://www.cnblogs.com/mofish/archive/2012/02/25/2367858.html

下面是写的一个登录的demo，供参考学习

<!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>生产管理中心</title>
<style type="text/css">
body{
	margin: 0px; 
	width: 100%;
	height: 100%;	
}
#bgDiv{
	width: 100%;
	height: 100%;
	background-image: url(bkground.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
}
.loginDiv{
	width: 460px;
	height: 370px;
	border:1px solid #2a2a29;
	border-radius:4px;
	font-family: "微软雅黑";
	letter-spacing:1px;
	position: relative;
	top:180px;
	color:#fff;
	margin:0 auto;
	
}
.innerDiv{ 
	width: 458px;
	height: 368px;
	border: 1px solid #575757;
	border-radius:3px;
}
.loginHead{ 
	height:35px;
	text-align: center;
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#383838,endColorStr=#262626); /*IE*/ 
	background:-moz-linear-gradient(top,#383838,#262626);/*火狐*/ 
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#383838), to(#262626));
	padding:10px;
	font-size: 25px;
	font-weight: blod;
}
.loginBody{ 
	height:241px;
	border-top:1px solid #4a4f54;
	border-bottom:1px solid #4a4f54;
	/* background-color: #2d2d2d; */
	position: relative;
}
.loginBody label{
	font-size: 18px;
	display: block;
	margin: 20px 30px 10px;
}
.loginBody input{
	background-color:#fff;
	display: block;
	height: 20px;
	width:375px;
	border:1px solid #000;
	border-radius:5px;
	color:#999999;
	font-family: Arial,sans-serif;
	font-size: 18px;
	padding:10px 20px;
	margin-left:15px
}
.loginBodyBg{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	background-color: #2d2d2d;
	filter:alpha(opacity=70); /*IE滤镜，透明度50%*/
	-moz-opacity:0.7; /*Firefox私有，透明度50%*/
	opacity:0.7;
}
.bodyContent{
	width:100%;
	height: 100%;
	z-index:2;
	position: absolute;
	top: 0px;
	left:0px;
	/* padding: 10px 15px; */
}

.loginFoot{ 
	height:50px;
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#2b2b2f,endColorStr=#1d1d24); /*IE*/ 
	background:-moz-linear-gradient(top,#2b2b2f,#1d1d24);/*火狐*/ 
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#2b2b2f), to(#1d1d24));
	padding:10px;
}
.checkbox{
	font-size: 18px;
	position: relative;
	margin-top: 10px;
	display: inline-block;
}
.checkbox:HOVER,.checkbox input[type=checkbox],.lgBtn{
	cursor:pointer;
	color:#ffffee;
}
.loginFoot input[type=checkbox]{
	width: 18px;
	height: 18px;
	margin: 0 10px;
	position: relative;
	top:3px;
}
.loginFoot .lgBtn{
	float: right;
	height: 100%;
	width:160px;
	border-radius:5px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dddddd));
	font-weight: bold;
	font-size: 22px;
	color:#444;
	border: aliceblue;
}
.lgBtn:ACTIVE {
	border-style: inset;
}
#mesFont{
	display:block;
	margin: 8px 30px;
	color:red;
}
</style>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript">
var b = new Base64();
	function load(){		
		//设置背景大小
		var userAgent = navigator.userAgent;
		var h1 = document.body.scrollHeight;
		var h2 = window.screen.height;
		var bgDiv = document.getElementById("bgDiv");		
		if(userAgent.indexOf("Chrome") > -1){
			bgDiv.style.height= h1+"px";
		}else{
			bgDiv.style.height= h2+"px";
			document.body.style.overflow = "hidden";
		}
		
		//登录失败清空记住的密码
		/*if("${LoginMessage}"=="密码错误！"){
			setCookie("proCen_password","",0);
		}else if("${LoginMessage}"=="用户名不存在！"){
			setCookie("proCen_password","",0);
			setCookie("proCen_userNo","",0);
			setCookie("proCen_rememb","true",0);
		}*/
		
		//设置记住密码值
		document.getElementById("userNo").value=getCookie("proCen_userNo");
		document.getElementById("password").value=getCookie("proCen_password");
		if(getCookie("proCen_rememb")!=""){
			document.getElementById("rememb").checked="checked";
		}
	}
	
	function getCookie(name){
		var c = document.cookie;
		name = b.encode(name);
		if(c.length>0){
			var val_s = c.indexOf(name+"=");
			if(val_s!=-1){
				val_s = val_s + name.length + 1;
				val_e = c.indexOf(";",val_s);
				return b.decode(unescape(c.substring(val_s, val_e)));
			}
		}
		return "";
	}
	
	function setCookie(name,value,time){
		var date = new Date();
		var exp = ";expires=";
		name = b.encode(name);
		if(time==undefined||time==null||time<=0||isNaN(time)){
			date.setDate(date.getDate() - 1); //清除cookie
		}else{
			date.setDate(date.getDate() + time);
		} 
		document.cookie=name + "=" +b.encode(escape(value)) +  exp + date.toGMTString();
	}
</script>
</head>
<body οnlοad="load()">
	<div id="bgDiv">
		<div class="loginDiv" id="lgDiv">
			<div class="innerDiv">
			<form action="login" method="post" οnsubmit="return chk(this);">
				<div class="loginHead">
					<label>生产管理中心</label>
				</div>
				<div class="loginBody">
					<div class="loginBodyBg"></div>
					<div class="bodyContent">
						<label class="lgLab">用户名</label>
						<input type="text"  name="userNo" id="userNo"/>
						<label class="lgLab">密码</label>
						<input type="password"  name="password" id="password"/>
						<font id="mesFont">用户名错误</font>
					</div>
				</div>
				<div class="loginFoot">	
					<label class="checkbox"><input type="checkbox" id="rememb"/>记住密码</label>	
					<button class="lgBtn" type="submit" id="submit">登录系统</button>
				</div>
			</form>
			</div>
		</div>
	</div>
</body>
<SCRIPT language=JavaScript type=text/JavaScript>
function chk(a)
{
if (a.userNo.value=="")
{
alert ("请先输入账号");
a.userNo.focus();
return false;
}
if (a.password.value=="")
{alert("请先输入密码");
a.password.focus();
return false;
}
if(a.rememb.checked==true){
	setCookie("proCen_userNo",a.userNo.value,10);
	setCookie("proCen_password",a.password.value,10);
	setCookie("proCen_rememb","true",10);
}else{
	setCookie("proCen_userNo",a.userNo.value,0);
	setCookie("proCen_password",a.password.value,0);
	setCookie("proCen_rememb","true",0);
}

a.submit.innerHTML="正在登录中...";
a.submit.disabled=true;
a.submit.disabled=true;
}

if(top.location!=self.location){
	top.location = self.location;
}
</SCRIPT>
</html>