반응형
로그인 시 아이디, 패스워드 쿠키에 저장하는 코드!
서버단으로 넘어갈 필요없고, 아주 간단하다!
Jsp - save Btn
체크박스를 만들어 아이디 저장 여부를 체크할 수 있도록 한다.
나는 내가 개발 할 때 편하게 하려고 id, password 체크박스를 따로 나누지 않았는데,
따로 나누어 진행해도 된다.
<label><input type="checkbox" id="saveBtn"> Save Email & Password</label>
Jsp - Login Btn
로그인 버튼을 누르면 loginProcess 이벤트로 이동해서 쿠키를 체크한다.
<button type="button" onclick="loginProcess();">Login</button>
script
설명은 주석으로!
function loginProcess(){
var id = $("#mail").val();
var pwd = $("#password").val();
var idChk = $("#saveBtn").is(":checked"); // 체크박스가 체크되었는지를 담아준다. ( true/false 로 담긴다.)
if(id == ""){ // 아이디가 입력이 안된 채 로그인 버튼을 누른 경우
alert("Enter mail"); // 입력하라는 메세지 출력
$("#mail").focus(); // 아이디 인풋창에 포커스를 맞춰준다.
return false; // return false를 해줘서 서버이동을 막는다.
}else if(pwd ==""){
alert("Enter password");
$("#password").focus();
return false;
}else if(idChk){ // 아이디, 비밀번호 저장 체크박스가 체크 된 경우 (true)
setCookie("Cookie_mail", id, 7); // 쿠키에 저장하는 이벤트를 호출한다. Cookie_mail 이름으로 id가 7일동안 저장
setCookie("Cookie_pwd", pwd, 7);
}else{ // 체크가 해제 된 경우 (false)
deleteCookie("Cookie_mail"); // 쿠키 정보를 지우는 이벤트를 호출한다.
deleteCookie("Cookie_pwd");
}
$("#loginForm").submit();
};
script
로그인 페이지가 로드될 때
쿠키에 저장된 정보를 조회해서 아이디 비밀번호를 input창에 보여주고
쿠키가 있는 경우 체크박스를 체크해준 상태로 페이지를 로드한다.
$(function(){
// 쿠키값 읽어오기
var mail = getCookie("Cookie_mail");
var pwd = getCookie("Cookie_pwd");
if(mail){
$("#mail").val(mail);
$("#password").val(pwd);
$("#saveBtn").attr("checked", true);
}
});
쿠기 값 저장하는 이벤트
function setCookie(cookieName, value, exdays){
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays); // 쿠키 저장 기간
var cookieValue = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toGMTString());
document.cookie = cookieName + "=" + cookieValue;
}
쿠키 값 조회하는이벤트
function getCookie(cookieName) {
cookieName = cookieName + '=';
var cookieData = document.cookie;
var start = cookieData.indexOf(cookieName);
var cookieValue = '';
if(start != -1){
start += cookieName.length;
var end = cookieData.indexOf(';', start);
if(end == -1)end = cookieData.length;
cookieValue = cookieData.substring(start, end);
}
return unescape(cookieValue);
}
쿠키값 지우는 이벤트
function deleteCookie(cookieName){
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() - 1);
document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}
전체 코드!
<form action="login.do" method="post">
<label><input type="checkbox" id="saveBtn"> Save Email & Password</label>
<button type="button" onclick="loginProcess();">Login</button>
</form>
<script>
$(function(){
var mail = getCookie("Cookie_mail");
var pwd = getCookie("Cookie_pwd");
if(mail){
$("#mail").val(mail);
$("#password").val(pwd);
$("#saveBtn").attr("checked", true);
}
});
function loginProcess(){
var id = $("#mail").val();
var pwd = $("#password").val();
var idChk = $("#saveBtn").is(":checked");
if(id == ""){
alert("Enter mail");
$("#mail").focus();
return false;
}else if(pwd ==""){
alert("Enter password");
$("#password").focus();
return false;
}else if(idChk){
setCookie("Cookie_mail", id, 7);
setCookie("Cookie_pwd", pwd, 7);
}else{
deleteCookie("Cookie_mail");
deleteCookie("Cookie_pwd");
}
$("#loginForm").submit();
};
function setCookie(cookieName, value, exdays){
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var cookieValue = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toGMTString());
document.cookie = cookieName + "=" + cookieValue;
}
function getCookie(cookieName) {
cookieName = cookieName + '=';
var cookieData = document.cookie;
var start = cookieData.indexOf(cookieName);
var cookieValue = '';
if(start != -1){
start += cookieName.length;
var end = cookieData.indexOf(';', start);
if(end == -1)end = cookieData.length;
cookieValue = cookieData.substring(start, end);
}
return unescape(cookieValue);
}
function deleteCookie(cookieName){
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() - 1);
document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}
</script>
반응형
'웹개발정보' 카테고리의 다른 글
[JQuery] 테이블 정렬 (Table sort) (1) | 2021.04.12 |
---|---|
[Spring] 테이블 데이터 ajax로 조회하고 행 추가 (0) | 2021.01.18 |
[Spring] dataTables 사용법 정리 (feat. ajax) (0) | 2021.01.18 |
[css] a태그 페이지 이동 막기 (0) | 2020.12.16 |
[HTML] 특수문자 코드 - HTML Entities (0) | 2020.12.16 |
댓글