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