위의 그림과 같이 최근 거의 모든 사이트에서는 아이디 저장하기 기능을 사용하고 있다.
이는 좀더 간편하게 자주 로그인을 하게끔 유도하는 방법 중 하나로 자바스크립트와 쿠키를 이용하여 간단하게 구현할 수 있다.


<input type="text" name="id"> 아이디
<input type="password" name="pass"> 패스워드
<input type="checkbox" name="idcheck"> 아이디저장 체크박스
<input type="submit"> 확인버튼

위와 같이 4개의 폼으로 구성되어있다고 가정하고 4개의 폼은 모두
<form action="******" name="frm" method="post"></form>
으로 둘려사여져 있다라고 보자!


--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------

아래는 모두 javascript 함수들로 이 기능에 사용된 것들이다.

0. confirmSave - 체크박스를 클릭했을경우 나타나는 대화상자로 일종의 경고문이다. 
취소 버튼을 누르면 체크박스를 false 시킨다.
 이 함수는 체크박스 클릭시 사용되어진다. (이벤트 추가)
<input type="checkbox" name="idcheck" onClick="confirmSave(this)"> 



function confirmSave(checkbox)
{
 var isRemember;

 if(checkbox.checked)
 {
 isRemember = confirm("이 PC에 로그인 정보를 저장하시겠습니까? PC방등의 공공장소에서는 개인정보가 유출될 수 있으니 주의해주십시오.");

  if(!isRemember)
   checkbox.checked = false;
 }
}


----------------------------------------------------------------------------------------

1. setsave - 본인의 컴퓨터에 쿠키로 저장하는 함수이다. 어떤이름(name)으로 무엇을(value) 얼마나(expiredays) 저장하는지..매개변수값을 받고 있다

function setsave(name, value, expiredays)
{
 var today = new Date();
 today.setDate( today.getDate() + expiredays );
 document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";"
}


----------------------------------------------------------------------------------------
2. saveLogin - 저장할 아이디 값을 받아 위의 setsave 함수에게 토스해주는 함수이다. 저장할 아이디 값이 있느냐 없느냐를 검사하는 곳이기도 하다

function saveLogin(id)
{
 if(id != "")
 {
  // userid 쿠키에 id 값을 7일간 저장
  setsave("userid", id, 7);
 }else{
  // userid 쿠키 삭제
  setsave("userid", id, -1);
 }
}


그럼 언제 이 함수를 호출해 주느냐????하면..바로 submit 할때이다. 
submit 하는 곳에 아래와 같은 문구를 추가해주자!

if(frm.idcheck.checked) 

saveLogin(frm.id.value);

 else 

saveLogin("");

이렇게 하면 일단 쿠키에 저장하는 단계는 끝이다.
이제는 저장된 쿠키의 내용(아이디)를 불러오기만 남았다.
----------------------------------------------------------------------------------------

3. getLogin - 위에 있던 함수들에 의해 쿠키에는 이미 ID가 담겨있게 된다. 이 함수는 그 값을 불러오는 함수인데...당연히 페이지가 로드될때 호출된다. 
<body onLoad="getLogin()">
아래의 함수 내용을 보면 읽어와서 무엇무엇을 하는지 알수 있다.

function getLogin()
{
 // userid 쿠키에서 id 값을 가져온다.
 var cook = document.cookie + ";";
 var idx = cook.indexOf(key, 0);
 var val = "";

 if(idx != -1)
 {
  cook = cook.substring(idx, cook.length);
  begin = cook.indexOf("=", 0) + 1;
  end = cook.indexOf(";", begin);
  val = unescape( cook.substring(begin, end) );
 }

 // 가져온 쿠키값이 있으면
 if(val!= "")
 {
  document.frm.id.value = id;
  document.frm.idcheck.checked = true;
 }
}

이렇게 쿠키를 이용한 아이디저장 기능이 완성되었다.^^;


var idx = cook.indexOf(key, 0);
-> key란 쿠키를 구울적에 setsave("userid", id, -1); name, value, 시간인데
name을 말함 여기선 "userid"가 key가됨.
즉 key대신에 "userid"를 넣거나
var key = "userid";

document.frm.id.value = id;
-> document.폼네임.입력필드이름.value = val;



출처 - http://chany1995.tistory.com/283





'Development > JavaScript' 카테고리의 다른 글

javascript - jstl 참조하기  (0) 2014.01.03
shell script - 쉘 스크립트란  (1) 2013.11.07
javascript - document.body.scrollTop  (0) 2013.11.02
Backbone.js  (0) 2013.10.13
javascript - 라우팅  (0) 2013.10.13
Posted by linuxism
,