jquerymobiel과 sessionStrorage를 이용한 로그인 처리 > jquery

설명은 사족이다.

바로 코드 들어간다.

<!-- 로그인 페이지 ID=loginPage -->

<div data-role="page" id="loginPage" class="type-home">

<div data-role="header" class="sub_header" data-position="inline" >

<h1><a href="#indexPage"><img src="images/sub_logo.png" class="sub_logo" /></a></h1>

<div class="sub_header_title"><img src="images/login.png" height="22" /><br /><img src="images/s_login.png" height="9" /></div>

</div>

<div data-role="content"> 

<div data-role="fieldcontain" class="ui-hide-label">

<label for="loginid">LOGIN ID</label><input type="text" name="loginid" id="loginid" value="" placeholder="Login ID" />

<label for="loginpw">LOGIN PASSWORD</label><input type="password" name="loginpw" id="loginpw" value="" placeholder="Login PASSWORD" />

<input type="submit" value="로그인" />

</div>

<div id="login_message" class="round_conur">회원가입은 PC버전의 웹 페이지에서<br /> 하여 주시기 바랍니다.</div>

</div>

<div data-role="footer" data-id="foot" data-position="fixed" data-theme="f"><!-- class="ui-footer-fixed" 로 설정 하면 화면에서 사라 지지 않는다. -->

<div class="sub_footer">

<div class="ui-grid-d">

<div class="ui-block-a"><img src="images/foot01.png" width="61" /></div>

<div class="ui-block-b"><img src="images/foot02.png" width="61" /></div>

<div class="ui-block-c"><img src="images/foot03.png" width="61" /></div>

<div class="ui-block-d"><img src="images/foot04.png" width="61" /></div>

<div class="ui-block-e"><img src="images/foot05.png" width="61" /></div>

</div><!-- /grid-b -->

</div>

</div>

</div>

로그인 페이지 코드 이다.

//로그인 페이지 정보

$("#loginPage").live("pageshow",function(event,ui) {

$("input[type=submit]", this).one("click",function() {

if($("#loginid").val() == "") {

errorDialog("아이디를 입력해 주십시오.");

return;

}

if($("#loginpw").val() == "") {

errorDialog("비밀번호를 입력해 주십시오.");

return;

}

//로그인 체크 하기

$.getJSON("loginck.php",{loginid:$("#loginid").val(),loginpw:$("#loginpw").val()},function(data) {

if(data["return"] == "loginok") {

//로컬 session 이용해서 정보 저장

sessionStorage.setItem("loginId",$("#loginid").val());

$.mobile.changePage($("#indexPage"));

} else {

errorDialog("로그인 정보가 맞지 않습니다.");

return;

}

});

});

});

로그인 페이지의 로그인 처리 자바스크립트다.

다른건 설명 안해도 될테니  핵심만 설명 한다.

$.getJSON(~~~~~) 이부분은 서버에 로그인 정보를 보내서 로그인 정보가 맞는지 확인하는 부분

로그인 정보가 맞다면

sessionStorage.setItem("loginId"),$("#loginid").val());  // 이 부분은 세션스토로지에 로그인 아이디를 담는다.

담아진 로그인 아이디는 var loginId = sessionStorage.getItem("loginid");  형태로 가져온다. 값이 없을 때는 null을 돌려 준다.

그리고 난 뒤에 페이지를 이동한다. 이동할때는 location.href 방법으로 이동 하지 말고 $.mobile.changePage($("#indexPage")); 방식으로 이동한다. 

(참조 http://jquerymobile.com/demos/1.1.1/docs/api/methods.html )

하나 더 설명 하자면

$("input[type=submit]", this).one("click",function() {  

형태로 클릭 이벤트를 사용 한 이유는  $("input[type=submit]",this).click 형태로 이벤트 처리를 하게 되면 오류시 왔다 갔다 하면서 이벤트가 중첩되는 현상이 발생 한다.  그래서 두번째 세번째 오류 가 날경우 한번만 메시지가 뜨는 것이 아니라 2번 3번 메시지가 뜨기 때문에 one 형태로 이벤트를 호출 해서 이벤트에 대해서 clear 시키는 것 까지 한꺼번에 할 수 있게 되는 것이다.