周记(cookie记住密码功能)
2015-12-29 13:57
435 查看
登录中有一个记住密码的功能，这个项目是一个局域网项目，安全性要求不是很高，就准备把密码记录在本地的cookie中了，这里先了解了下cookie以及js对cookie操作，项目的代码
这里只是简单的操作了下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，供参考学习
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 onload="load()">
<div id="bgDiv">
<div class="loginDiv" id="lgDiv">
<div class="innerDiv">
<form action="login" method="post" onsubmit="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- “浅”谈容灾和双活数据中心（上）[转载自冬瓜哥]
- [cocos2dx] 如何解决cocostudio创建的动画不能适配问题
- spring annotation-config 标签
- jQuery源码分析5
- 项目设计
- MapKit的基本使用
- Android开发笔记（三十二）文件基础操作
- 如何快熟集成支付宝
- C++ template —— 模板基础（一）
- 【常用工具类】UIUtil
- 苹果邓白氏编码申请
- android自动提示输入框
- Linux hrtimer分析--配置高精度模式
- ASP.NET教程
- 相对定位和绝对定位
- asp.net mvc4 webapi Post 参数 字符串
- 命令在程序脚本中调用与串口执行结果不一致？
- ios证书的选择
- 解决子view加点击后父布局不能滑动问题
- EnentBus进行页面间的传值