자바스크립트 로그인폼 아이디저장 기능에 대한 질문입니다.lsh00315 2007.07.09 17:21 |
답변 1 조회 1,975 |
|---|
만들고 있는 쇼핑몰에 아이디저장기능을 추가시키려고 네이버를 돌아다니는데 아래 소스를 가장 많이 쓰는거같아 시도해봤는데 안되더군요... 원본 소스는
=========================================================
<html>
<head>
<script language="javascript">
function setCookie (name, value, expires) {
document.cookie = name + "=" + escape (value) +
"; path=/; expires=" + expires.toGMTString();
}
function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면
offset = document.cookie.indexOf(search)
if (offset != -1) { // 쿠키가 존재하면
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset)
// 쿠키 값의 마지막 위치 인덱스 번호 설정
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
return "";
}
function saveid(form) {
var expdate = new Date();
// 기본적으로 30일동안 기억하게 함. 일수를 조절하려면 * 30에서 숫자를 조절하면 됨
if (form.checksaveid.checked)
expdate.setTime(expdate.getTime() + 1000 * 3600 * 24 * 30); // 30일
else
expdate.setTime(expdate.getTime() - 1); // 쿠키 삭제조건
setCookie("saveid", form.id.value, expdate);
}
function getid(form) {
form.checksaveid.checked = ((form.id.value = getCookie("saveid")) != "");
}
//맨 위에서부터 여기까지 main페이지에 붙여넣었습니다
</script>
</head>
<body onLoad="getid(document.mainform)">
<form name=mainform>
아이디 <input type=text name=id>
암호 <input type=password name=pw>
<input type=checkbox name=checksaveid onClick="saveid(this.form)">아이디 기억
</form>
</body>
</html>
=======================================================
이 색으로 바꾼것이 제가 복사하여 직접 사용한 소스부분입니다.
인덱스 파일이 있고 여기에 header/main/bottom 등을 불러오게 되있습니다.
로그인폼이 main 에 있어서 위 소스중 헤드 안에 들어가는 소스를 main 자바스크립트 안에 넣었습니다.(본문소스중 파란글씨로 적어놓았습니다)
그리고 나머지 소스들도 마찬가지로 main에 넣었습니다 그 소스입니다.
===============실제 적용한 소스 내용==================
<td width="119" height="24" onLoad="getid(document.login_id)">
<form name="login_id">
<input type="text" name="login_id" maxlength="15" size="17" class="text" style="width:110px" tabindex="1" style="background-image:url('<?=$g_skin_link?>/image/id_log_bg1.gif'); border-width:1; border-color:#a9a9a9; border-style:solid; width:120px; height:18px;" tabindex="3" autocomplete="off" onFocus="this.style.background='#ffffff'" onBlur="this.style.background='#ffffff'">
</td>
<td width="233" height="48" rowspan="2"> <input type="image" src="<?=$g_skin_link?>/image/loginleft_002.gif" width="49" height="42" border="0" onfocus="blur()" name="I1" ></td>
</tr>
<tr>
<td width="119" height="24">
<input type="password" name="login_pass" maxlength="15" size="17" class="text" style="width:110px" autocomplete="off" tabindex="2" style="background-image:url('<?=$g_skin_link?>/image/pw_log_bg1.gif'); border-width:1; border-color:#a9a9a9; border-style:solid; width:120px; height:18px;" autocomplete="off" tabindex="4" onFocus="this.style.background='#ffffff'" onBlur="this.style.background='#ffffff'">
</td>
</tr>
<tr>
<td width="385" height="5" colspan="3"></td>
</tr>
<tr>
<td width="13" height="27"> </td>
<td width="353" height="27" colspan="2">
<input type=checkbox name=checksaveid onClick="saveid(this.form)">
==================================================================
정리해드리자면
main의 <script language=JavaScript> 안에
위 원본 소스 상단에 위치한 가장 긴 부분을 넣었고.
나머지는 로그인 폼 안에 "실제 적용한 소스 내용" 안에 오렌지색으로 바꾼 소스가
실제로 추가한 소스입니다.
근데 이상하게 정상 적용되지 않는군요...뭔가 잘못한건지..초짜라...
자세하게 설명 부탁드립니다.
- 추가된 질문
- 2007.07.10 22:27 추가
- // 저장할 변수명, 저장할변수, 일자 (1:1일, 2:2일, 365:일년)
function setCookie (name, value, expiredays)
일자는 알겠는데 저장할변수명과 저장할변수에는 뭐라고 써 넣어야 하는건가요?
그리고 onload='javascript:getValue();' 이것은 꼭 body에 넣어야 하는건가요? 로그인폼은 main페이지이고
body가 있는 페이지는 header입니다. 상관 없나요?
- // 저장할 변수명, 저장할변수, 일자 (1:1일, 2:2일, 365:일년)
의견 쓰기
답변하시면 내공 10점을, 답변이 채택되면 내공 75점(채택25+추가50)을 드립니다. 
re: 자바스크립트 로그인폼 아이디저장 기능에 대한 질문입니다. |
|
|---|
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
// 저장할 변수명, 저장할변수, 일자 (1:1일, 2:2일, 365:일년)
function setCookie (name, value, expiredays)
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";";
}
function getCookie(name)
{
var Found = false;
var start, end;
var i = 0;
while (i <= document.cookie.length)
{
start = i;
end = start + name.length;
if (document.cookie.substring(start, end) == name)
{
Found = true;
break;
}
i++;
}
if (Found == true)
{
start = end + 1;
end = document.cookie.indexOf(';', start);
if (end < start) end = document.cookie.length;
return document.cookie.substring(start, end);
}
return '';
}
function setValue()
{
var fm = document.form;
setCookie ('user_id', fm.user_id.value, 1);
}
function getValue()
{
var fm = document.form;
fm.user_id.value = getCookie('user_id');
}
</script>
</HEAD>
<!-- body load 이후 쿠키에 저장된 값을 가져와 ID 값을 적용한다. -->
<BODY onload='javascript:getValue();'>
<form name='form'>
<table>
<tr>
<td>
<input type='text' name='user_id' style='width:100;' maxlength='10'>
<!-- user_id 값을 쿠키에 저장한다. -->
<input type='button' name='btn' value='setCookie' onclick='javascript:setValue();'>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
반듯이 onload 부분에 넣을 필요는 없습니다. 'user_id' 객체가 생성된 후 실행하기
위해서 해당 함수에 넣었을 뿐 특별한 이유는 없습니다.
onload 에 넣지 않을 경우는 user_id 객체가 선언된 이후에 호출 되도록 해야 합니다.
저장할 변수명과 가저올 변수명은
user_id 를 저장할때 쿠키에 저장할 이름을 정해 놓아야 가져올때도 가져 올 수 있기
때문입니다.
학교에서 한반의 학생들에게 번호를 부여하고 번호대로 호출 하듯이
집어넣을때 이름을 붙여넣으면 가져올때 똑같은 이름을 호명해서 쿠키에서
불러올 수 있기때문입니다.
부여하는 이름은 특별히 정해진것은 아니며 쿠키를 제작하는 사람의 기호에 맞춰서
집어넣으면 됩니다. 쿠키에 저장된 변수를 불러올때는 이때 이용한 이름을 이용하여
불러오면 되기때문에 불러올때와 집어넣을때 명칭은 동일하게 됩니다.
