使用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"
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>