안녕하세요 쿠키를 저장하고 불러오고 삭제하는 함수와 jQuery를 이용해서 로그인 시 아이디 저장하는 예제를 만들어보겠습니다.
쿠키 저장 (setCookie)
| 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; } | c |
|
cookieName = 쿠키 이름
value = 쿠키에 넣을 값
exdays = 만료일 (일 단위)
쿠키 불러오기 (getCookie)
| 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); } | |
|
cookieName = 쿠키 이름
쿠키 삭제 (deleteCookie)
| function deleteCookie(cookieName){ var expireDate = new Date(); expireDate.setDate(expireDate.getDate() - 1); document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString(); } | cs |
|
cookieName = 쿠키 이름
위의 소스를 이용하여 아래와 같이 만들 수 있습니다
index.html
| <!DOCTYPE html> <html> <head> <title>LOGIN</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="login.js"></script> <body> <form method="post" id="loginForm" name="loginForm" action="login.jsp" method="POST"> <label>ID</label><input type="text" id="userId" name="userId" placeholder="Your ID"><br> <label>PW</label><input type="password" id="userPw" name="userPw" placeholder="Your Password" onKeyDown="if(event.keyCode==13)loginProcess()"><br> <input type="button" value="LOGIN" onClick="loginProcess()"><br> <label><input type="checkbox" id="saveId" name="saveId">Remember me?</label> </form> </body> </html> | cs |
|
11번라인 에서는 onKeyDown 이벤트를 사용했습니다. onKeyDown는 키보드 자판을 누르는 동시에 일어나는 이벤트인데요.
따라서, if(event.keyCode==13)loginProcess() 키코드 13번이 눌리는 이벤트라면 loginProcess()라는 javascript 함수를 호출한다는 이야기입니다.
(KeyCode 13번은 'Enter')
최종적으로, ID와 PW를 입력하고 LOGIN버튼을 누르지 않고 Enter를 누르게 되면 LOGIN버튼을 누른것과 같은 결과를 내보내게 됩니다.
login.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $(function(){ var userId = getCookie("Cookie_userid"); $("#userId").val(userId); if($("#userId").val() != "") $("#saveId").attr("checked", true); }); function loginProcess(){ var id = document.getElementById('userId'); var pw = document.getElementById('userPw'); var loginForm = document.getElementById('loginForm'); if(id.value==""){ alert("Enter ID"); id.focus(); return false; }else if(password.value==""){ alert("Enter password"); password.focus(); return false; }else if($("#saveId").is(":checked")){ var userId = $("#userId").val(); setCookie("Cookie_userid", userId, 30); loginForm.submit(); }else{ deleteCookie("Cookie_userid"); loginForm.submit(); } } | cs |
|
1번라인부터 7번라인까지는 jQuery 소스 입니다.
페이지 로드시에 쿠키를 가져오고 id값이 userId인 텍스트박스에 쿠키값으로 된 value를 집어 넣습니다.
만약에, id값이 userId인 텍스트박스에 value가 있다면 id값이 saveId라고 하는 체크박스를 그대로 check 상태로 두는 소스입니다.
loginProcess 함수는 ID값과 PW값을 미 입력 시 입력하라는 alert(경고창)을 내보내게 됩니다.
그리고 만약 id값이 saveId라고 하는 체크박스가 체크되어있다면
"Cookie_userid"라는 쿠키이름에 userId값을 넣고 30일동안 쿠키값에 담아두게 됩니다.
예를 들어, setCookie("Cookie_userid", userId, 7); 이라고 한다면 7일동안 쿠키값에 담아두게 되는 것 이죠.
그 후에 loginForm을 submit 합니다.
또, 체크가 되어있지 않다면 해당 쿠키를 삭제해버리고 loginForm을 submit합니다.