728x90
반응형
로그인 기능에 아이디저장하는 것을 만들고 싶은데
어떻게 만들어야할까??
<예제 코드>
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <html> <head> <script> $(document).ready(function(){ var userInputId = getCookie("userInputId");//저장된 쿠기값 가져오기 $("input[name='id']").val(userInputId); if($("input[name='id']").val() != ""){ // 그 전에 ID를 저장해서 처음 페이지 로딩 // 아이디 저장하기 체크되어있을 시, $("#idSaveCheck").attr("checked", true); // ID 저장하기를 체크 상태로 두기. } $("#idSaveCheck").change(function(){ // 체크박스에 변화가 발생시 if($("#idSaveCheck").is(":checked")){ // ID 저장하기 체크했을 때, var userInputId = $("input[name='id']").val(); setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관 }else{ // ID 저장하기 체크 해제 시, deleteCookie("userInputId"); } }); // ID 저장하기를 체크한 상태에서 ID를 입력하는 경우, 이럴 때도 쿠키 저장. $("input[name='id']").keyup(function(){ // ID 입력 칸에 ID를 입력할 때, if($("#idSaveCheck").is(":checked")){ // ID 저장하기를 체크한 상태라면, var userInputId = $("input[name='id']").val(); setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관 } }); }); 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 deleteCookie(cookieName){ var expireDate = new Date(); expireDate.setDate(expireDate.getDate() - 1); document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString(); } 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); } </script> </head> <form action="where.do" onsubmit="return false"> <table> <tr> <td>Text에 값 넣기<br></td> </tr> <tr> <td rowspan="1" colspan="3" style="vertical-align: top; width: 30%;"> <input type="text" name="id"> </td> </tr> <tr> <td><input type="submit" value="로그인"><br>아이디 저장하기 <input type="checkbox" id="idSaveCheck"></td> </tr> </table> </form> </html> | cs |
jQuery와 javascript를 이용하여 쿠키를 통해 ID를 저장하고 불러올수 있다.
반응형
'Programming > HTML&JAVASCRIPT&JQuery' 카테고리의 다른 글
| [jQuery]display 여부에 따른 show, hide 설정하기. (0) | 2019.02.22 |
|---|---|
| <JQuery> jQuery를 사용하여 readonly, disabled 설정하기! (2) | 2018.10.11 |
| <html> input 태그가 하나만 있을 때 엔터를 치면 submit되는 현상 막기 (2) | 2018.10.11 |
| <HTML> textarea에 값을 넣어보자! (3) | 2018.10.11 |
| [HTTrack] HTTrack 크롤러를 설치하고 사용해보자! (2) | 2018.05.08 |
