로그인을 필요로 하는 웹사이트에서 로그인을 할 때 아이디 저장이라는 체크 박스를 보았을 것이다.
체크 박스에 체크를 하면 그다음 접속 시에 전에 입력한 아이디가 저장 되어 있는..
어떻게 이런일이 벌어질까..?
쿠키에 저장을 해놓고 다음 접속시 쿠키에 있는 값을 불러들여 화면에 표현해 주면 된다.
일단 순서는 아이디를 입력하고 체크 박스에 체크 후 로그인 버튼을 누르게 되면..
체크박스에 체크가 되어 있는지 되어 있지 않은지부터 확인을 하고..
체크가 되어 있다면 입력한 아이디를 쿠키에 저장 하기만 하면 된다.
저장 후 다시 불러 오는것은 화면이 불러와 지는 순간 쿠키에 아이디가 저장이 되어 있는지 되어 있지 않은지를
확인하여 화면에 표현해 주기만 하면 된다.
위의 기능들은 자바스크립트로 구현하였다.
소스코드는 아래와 같다.
// 쿠키에 id를 저장.
function setsave(name, value, expiredays) {
alert("cookie Save!!");
var today = new Date();
today.setDate(today.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + "; path=/; expires="
+ today.toGMTString() + ";";
alert("cookie Save Complete!!");
}
// 버튼 클릭시 실행 function
function saveId(){
//if (document.getElementById("idcheck").checked) {
saveLogin(document.getElementById("userId").value);
//} else {
//saveLogin("");
//}
}
// id를 받아와 쿠키에 저장할지 쿠키에서 삭제할지 결정.
function saveLogin(id) {
if (id != "") {
// userid 쿠키에 id 값을 7일간 저장
setsave("userid", id, 7);
} else {
// userid 쿠키 삭제
setsave("userid", id, -1);
}
}
// 화면 로드시 아이디
function getLogin() {
// userid 쿠키에서 id 값을 가져온다.
var cook = document.cookie + ";";
var idx = cook.indexOf("userid", 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.getElementById("userId").value = val;
document.getElementById("idcheck").checked = true;
}
}
<BODY onLoad="getLogin()">
<input type="button" id="changeColorButton" value="Click~!" onClick="saveId();">
<input type="text" name="userId" id="userId" />
<input type="checkbox" name="idcheck" id="idcheck"/>
</BODY>
버튼 클릭시 saveId() function을 실행하여 체크박스가 체크 되어있는지 되어있지 않은지 부터 확인한다.
체크가 되어 있다면 saveLogin(id) function에 입력한 아이디 값을 파라미터로 넘겨준다.
입력한 아이디 값의 유무를 확인하여 쿠키에 저장을 할지를 결정..
쿠키에는 저장할때의 키값과 아이디값 그리고 쿠키에서 저정할 기간을 저장..
이러면 저장은 완료가 된다.
그다음 쿠키에서 아이디값을 불러오는 방법..
화면이 로드 될 때 getLogin() function을 실행하여 쿠키안에 아이디 저장할때 쓰였던 키값이 있는지 없는지를 체크하여
있다면 화면에 보여주면 된다. 덤으로 체크박스에 체크도 해줘야 한다.
체크 박스에 체크를 하면 그다음 접속 시에 전에 입력한 아이디가 저장 되어 있는..
어떻게 이런일이 벌어질까..?
쿠키에 저장을 해놓고 다음 접속시 쿠키에 있는 값을 불러들여 화면에 표현해 주면 된다.
일단 순서는 아이디를 입력하고 체크 박스에 체크 후 로그인 버튼을 누르게 되면..
체크박스에 체크가 되어 있는지 되어 있지 않은지부터 확인을 하고..
체크가 되어 있다면 입력한 아이디를 쿠키에 저장 하기만 하면 된다.
저장 후 다시 불러 오는것은 화면이 불러와 지는 순간 쿠키에 아이디가 저장이 되어 있는지 되어 있지 않은지를
확인하여 화면에 표현해 주기만 하면 된다.
위의 기능들은 자바스크립트로 구현하였다.
소스코드는 아래와 같다.
// 쿠키에 id를 저장.
function setsave(name, value, expiredays) {
alert("cookie Save!!");
var today = new Date();
today.setDate(today.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + "; path=/; expires="
+ today.toGMTString() + ";";
alert("cookie Save Complete!!");
}
// 버튼 클릭시 실행 function
function saveId(){
//if (document.getElementById("idcheck").checked) {
saveLogin(document.getElementById("userId").value);
//} else {
//saveLogin("");
//}
}
// id를 받아와 쿠키에 저장할지 쿠키에서 삭제할지 결정.
function saveLogin(id) {
if (id != "") {
// userid 쿠키에 id 값을 7일간 저장
setsave("userid", id, 7);
} else {
// userid 쿠키 삭제
setsave("userid", id, -1);
}
}
// 화면 로드시 아이디
function getLogin() {
// userid 쿠키에서 id 값을 가져온다.
var cook = document.cookie + ";";
var idx = cook.indexOf("userid", 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.getElementById("userId").value = val;
document.getElementById("idcheck").checked = true;
}
}
<BODY onLoad="getLogin()">
<input type="button" id="changeColorButton" value="Click~!" onClick="saveId();">
<input type="text" name="userId" id="userId" />
<input type="checkbox" name="idcheck" id="idcheck"/>
</BODY>
버튼 클릭시 saveId() function을 실행하여 체크박스가 체크 되어있는지 되어있지 않은지 부터 확인한다.
체크가 되어 있다면 saveLogin(id) function에 입력한 아이디 값을 파라미터로 넘겨준다.
입력한 아이디 값의 유무를 확인하여 쿠키에 저장을 할지를 결정..
쿠키에는 저장할때의 키값과 아이디값 그리고 쿠키에서 저정할 기간을 저장..
이러면 저장은 완료가 된다.
그다음 쿠키에서 아이디값을 불러오는 방법..
화면이 로드 될 때 getLogin() function을 실행하여 쿠키안에 아이디 저장할때 쓰였던 키값이 있는지 없는지를 체크하여
있다면 화면에 보여주면 된다. 덤으로 체크박스에 체크도 해줘야 한다.
'JavaScript' 카테고리의 다른 글
| JavaScript의 비교 연산자와 일치 연산자..! (0) | 2012.05.22 |
|---|---|
| Ajax 한글 파라미터..! (0) | 2012.01.30 |
| JavaScript Parameter Encoding..! (0) | 2011.12.20 |
| JavaScript window.open...! (0) | 2009.11.04 |
| JavaScript Radio...! (0) | 2009.11.03 |
