Cookie實現記住密碼
做項目的時候,會有登錄功能,就會有一個記住我的功能,我們常常選擇使用Cookie來存信息。
爲什麼用Cookie呢?
1.HTTP協議是無狀態的,服務器無法記錄用戶上一次的操作,這樣就造成了交互上的阻礙。而Cookie就可以做到繞開HTTP的無狀態。服務器藉由從Cookie中讀取包含的信息,藉以維護用戶和服務器會話中的狀態。
2.Cookie緩存的信息是存到你的硬盤上的,而且你電腦關機也不會造成數據的丟失,最重要的是,你可以設置Cookie的保存時間,從建立Cookie開始,經過這麼久,它就會銷燬.
- 登錄的界面代碼 login.html
<div class="form_input clearfix">
<form>
<ul>
<li>
<input type="text" name="nickname" class="name_input" id="nickname" placeholder="請輸入用戶名" id="nickname">
</li>
<li>
<input type="password" name="pwd" class="pwd_input" id="pwd" placeholder="請輸入密碼" id="pwd">
</li>
<li>
<div class="more_input clearfix">
<input type="checkbox" checked id="remember">
<label for="remember" >記住我</label>
</div>
</li>
<li>
<input type="button" value="登錄" class="submit_input" onclick = "login()">
</li>
</ul>
</form>
</div>
- login.js:判斷是否要存cookie,使用MD5對密碼進行加密。使用md5加密解密需要用到兩個js文件.md5加密解密js文件
分兩步:
(1)點擊登錄的時候判斷用戶是否勾選了記住我複選框,如果選中傳一個判斷值交給後臺處理。
(2)每次進入到login.html頁面,一進入頁面之前就要判斷,是否有cookie數據,有的話,就取出來。
//模擬登陸
function login(){
//獲取用戶名
var nickname = $("#nickname").val();
//獲取密碼
var pwd = $("#pwd").val();
//傳過去一個MD5加密過的密碼 便於存cookie
var md5pwd=$.base64.btoa(encodeURIComponent(pwd));
//判斷是否要使用記住密碼和用戶名
var flag=0;
if($("#remember").prop("checked") ){//選擇了記住我
flag=1;
}
//發送請求 登錄
$.post("member/login",{nickName:nickname,pwd:pwd,flag:flag,md:md5pwd},function(data){
data=parseInt($.trim(data));
if(data>0){//登錄成功
//跳轉轉網頁
location.href = "member/index";
}else{
alert("用戶名或密碼錯誤");
location.href = "login.html";
}
},"text")
}
//每次一進入到login.html都要進行判斷是否有cookie
$(function(){
//取cookie
var str=document.cookie;
var pwd=str.split(";")[0].split("-")[1];
var pwd = decodeURIComponent($.base64.atob(pwd));//解密
$("#nickname").val(str.split(";")[0].split("=")[1].split("-")[0]);
$("#pwd").val(pwd);
})
- 後臺存cookie的處理代碼:MemberInfoController.java
@Controller
@RequestMapping("/member")
public class MemberInfoController{
@Autowired
private IMemberInfoBiz memberInfoBiz;
@RequestMapping("/login")
@ResponseBody
public int Login(@RequestParam Map<String,Object> map,HttpSession session,HttpServletResponse response) throws UnsupportedEncodingException, NoSuchAlgorithmException{
int result=-1;
MemberInfo member=memberInfoBiz.login(map);
if(member!=null){//登陸成功
// 判斷是否要存cookie
if("1".equals(map.get("flag"))){//說明勾選了記住我
//獲取到用戶名和密碼
String loginInfo=map.get("nickName")+"-"+map.get("md");
//實例化Cookie對象
Cookie userCookie = new Cookie("LoginInfo",loginInfo);
//設置編碼集
URLEncoder.encode(loginInfo,"utf-8");
//設置cookie的生命週期 7天
userCookie.setMaxAge(60*60*24*7);
userCookie.setPath("/");
response.addCookie(userCookie);
}
result=1;
}
return result;
}
}