[javascript] 아이디 저장 구현하기 ( 쿠키 cookie 저장)

text input 박스에서 아이디를 저장하는 로직을 구현해 보자.

이번에는 가장 가벼운 javascript 소스로 자체 html 상에서 바로 작업해 보았다.

 

<script>
// 쿠키저장하기
function setCookie(cookie_name, value, days) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + days);
   var cookie_value = escape(value) + ((days == null) ? '' : ';    expires=' + exdate.toUTCString());
  document.cookie = cookie_name + '=' + cookie_value;
}
 
// 쿠기 얻어오기
function getCookie(cookie_name) {
  var x, y;
  var val = document.cookie.split(';');
 
  for (var i = 0; i < val.length; i++) {
    x = val[i].substr(0, val[i].indexOf('='));
    y = val[i].substr(val[i].indexOf('=') + 1);
    x = x.replace(/^\s+|\s+$/g, ''); // 앞과 뒤의 공백 제거하기
    if (x == cookie_name) {
      return unescape(y); // unescape로 디코딩 후 값 리턴
    }
  }
}
 
function chk() {
    if (document.f.id_save.checked == true) {
        setCookie('c_userid', document.f.userid.value, '100');        
        alert(document.f.userid.value + "저장");
    } else {
        setCookie('c_userid', '', '100');
        alert("아이디 저장해제");
    }
}
</script>

<form name="f" method="post">
아이디    <input type=text id="userid" name="userid" value="" size="10"> 
 
<br> <input type=checkbox name="id_save" value="y">
<br><br>
 
<button value="저장하기" onclick="chk()">
 </form>
  
<script>
var id = getCookie("c_userid");
if (id == null || typeof id == "undefined") {
    id = "";
}
document.getElementById("userid").value = id;
</script>