對於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"
onclick="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"
onclick="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>