使用localstorage和cookie记录登录信息

对于cookies和localstorage在项目中使用频率还是很高的，常见的方法就是使用jquery的插件jquery.cookie.js，此次由于项目比较小，就没打算引入那么多插件，其实之前也写过几次，由于代码不多，这次也就再次实现了一次，权当是复习一下cookie和localstorage，有兴趣的朋友可以看看，代码浅显易懂

html部分：

<div id="loginform" >

<div class="control-group normal_text">
<h3>
<img src="$!contextPath/stylesheets/img/logo.png" alt="Logo" />
</h3>
</div>
<div class="control-group padding-left">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_lg"><i class="icon-user"></i></span><input
type="text" placeholder="Username" maxlength="18" id="userName"
class="validate[required,custom[onlyLetterNumber],maxSize[18]]" />
</div>
</div>
</div>
<div class="control-group padding-left">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_ly"><i class="icon-lock"></i></span><input
type="password" placeholder="Password" id="password"
maxlength="16" />
</div>
</div>
</div>
<div class="control-group padding-left">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_lb"> <i class="icon-picture"></i>
</span><input type="text" id="yzm" placeholder="验证码"  maxlength="4">
<img id="imgCode" src="$!contextPath/uploadfiles/code.do"
οnclick="javascript:refresh(this);" class="add-xn" />
</div>
</div>
</div>
<div class="form-actions">
<div class="footDiv pull-left">
<a class="flip-link btn btn-info" href="javascript:openmodalupdatebase('$!contextPath')">设置数据库连接信息</a>
</div>
<span class="pull-right">
<button type="button" class="btn btn-info" id="loginButton"
οnclick="login('$!contextPath')">登录</button>
</span> 
</div>
<div class="form-actions"> 
<div class="pull-left"> 
<a href="javascript:void(0)"  id="remberPWD"
onClick='wetherRemeber(this)'>记住账号密码</a>
</div>
<a href="javascript:anotherLoginWay('$!contextPath')"
class="flip-link pull-right" id="anotherLoginWay">其它登录方式</a>
</div>

</div>

JS部分

<script>

 function login(contextPath) {   

  $("#loginButton").attr('disabled',true);
            $.ajax({
            url:contextPath+"/login/doLogin.do?timestamp="+Math.random(),
            data:{
            username:$("#userName").val(),
            password:$("#password").val(),
            yzm:$("#yzm").val(),
            lp:lp 
            },
            dataType:"json",
            async:false,
            type:'post',
            success:function(data){
            if(data.state == "1"){
            remmberUserInfo();
             window.location.href=contextPath+"/user/index.do?timestamp="+Math.random();
            }else if(data.state == "5"){
            remmberUserInfo();
             window.location.href=contextPath+"/index.do?timestamp="+Math.random();
            }else if(data.state == "6" ){
            $("#modal-AddPassword").modal();
            }else if(data.state == "3" ){
            window.parent.ShowMainTMsg('','验证码不正确',2);
            }else if(data.state == "8" ){
            window.parent.ShowMainTMsg('','该账号没有登录权限',2);
            }else if(data.state == "7" ){
            window.parent.ShowMainTMsg('','该账号还没有赋予登录权限',2);
            }else if(data.state == "0" || data.state == "2"){
            window.parent.ShowMainTMsg('','用户名或密码错误',2);
            }else if(data.state == "4"){
            window.parent.ShowMainTMsg('','数据库连接有误，请联系管理员',2);
            }
            $("#loginButton").attr('disabled',false);
            }
            });
    } 

 //记住用户名密码
function remmberUserInfo(){
if($("#remberPWD").hasClass("rember")){//存储用户信息
if(window.localStorage){
window.localStorage.setItem("unames",$("#userName").val());
window.localStorage.setItem("upwds",$("#password").val()); 
}else{
var date=new Date(); 
var expiresDays=5; 
date.setTime(date.getTime()+expiresDays*24*3600*1000); 
document.cookie="unames="+$("#userName").val()+"&upwds="+$("#password").val()+";expires="+date.toGMTString();

}
}else{//清除用户信息
if(window.localStorage){ 
//console.log("SHANCHU");
for(var i=0;i<localStorage.length;i++){
//console.log(i+"::"+localStorage.key(i));
//console.log(localStorage.getItem(localStorage.key(i)));
if(localStorage.key(i)=="unames")
localStorage.removeItem(localStorage.key(i));
if(localStorage.key(i)=="upwds")
localStorage.removeItem(localStorage.key(i));
}
}else{ 
removeCookie("unames")
removeCookie("upwds");
}
}


}

//删除相应的cookie
function removeCookie(val){ 
//console.warn(val);
var date=new Date(); 
//将date设置为过去的时间 
date.setTime(date.getTime()-10000); 
//将userId这个cookie删除 
var cooks=document.cookie.replace(/&/g,";").split(";");
//console.warn(cooks);
for(var k in cooks){
var cDetail=cooks[k].split("=");
//console.log(cooks[k].split("=")[0]);
if(cDetail[0].replace(/(^\s*)|(\s*$)/g,"")==val&&cDetail[1]!=null){ 
document.cookie=val+"="+cDetail[1]+"; expires="+date.toGMTString(); 
}
}
}

</script>