-
쿠키를 이용한 아이디 저장Programing/Web 2009. 12. 23. 16:37
위의 그림과 같이 최근 거의 모든 사이트에서는 아이디 저장하기 기능을 사용하고 있다.
이는 좀더 간편하게 자주 로그인을 하게끔 유도하는 방법 중 하나로 자바스크립트와 쿠키를 이용하여 간단하게 구현할 수 있다.
<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;
}
}
이렇게 쿠키를 이용한 아이디저장 기능이 완성되었다.^^;
'Programing > Web' 카테고리의 다른 글
MVC 아키텍처의 이해 (0) 2009.12.07 기본 MVC 프로젝트 구조 (0) 2009.12.07 ABCUpload 업로드 파일 지우기 (0) 2009.11.27 asp.net 2.0 SMTP 메일 보내기 (0) 2008.07.15 데이터 바인딩 컨트롤 (0) 2008.07.14 PHP 간략 정리 (0) 2008.06.10 ASP.NET으로 게시판 만들기 3부 (0) 2008.06.03 SqlDataReader 객체 사용하기 (0) 2008.05.20 FileUpload 컨트롤 (0) 2008.05.14 Server.MapPath (0) 2008.05.14
