자바스크립트 로그아웃 구현

본문 바로가기

자바스크립트 로그아웃 구현

작성일 2023.10.11댓글 1건
    게시물 수정 , 삭제는 로그인 필요

회원가입하고 로그인까지 구현했는데 홈페이지에서 로그아웃을 구현하는 법을 모르겠어요
아래코드는 회원가입 html, js 로그인 html, js 홈페이지html 입니다

회원가입html

<!DOCTYPE html>
<html>
<head>
    <title>.</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/join.css">
</head>
<body>

<div class="login-form">
    <button type="button" class="back" value="" onClick="history.go(-1)">
        <img src="images/arrow.png">
    </button>
  <form action="" method="post" name="member">

    <input type="text" name="email" class="email" id="email"  placeholder="이메일">&nbsp;@&nbsp;
    <input type="text" name="email2" class="email2" id="email2">

    <select name="sel_addr" id=sel_addr onchange="sel_email()">
        <option value="">직접입력</option>
        <option value="naver.com">naver.com</option>
        <option value="hanmail.net">hanmail.net</option>
        <option value="gmail.com">gmail.com</option>
    </select>        
     
    <input type="password" name="password" class="pwd" id="pwd" placeholder="비밀번호">
   
    <input type="password" name="password" class="repwd" id="repwd" placeholder="비밀번호확인">


    <input type="button" onclick="form_check(this.form)" class="submit-btn" value="회원가입">
   
  </form>
</div>

    <script src="js/join.js"></script>
</body>
</html>

회원가입 js
function form_check(){

  var email=document.getElementById("email").value;
  var email2=document.getElementById("email2").value;
    var pwd = document.getElementById("pwd").value;
    var repwd = document.getElementById("repwd").value;
    var emailsum=document.getElementById("email").value + '@' + document.getElementById("email2").value;

    sessionStorage.setItem("emailsum", emailsum);
    sessionStorage.setItem("pwd", pwd);
 
    if(!email){
      alert('이메일주소를 입력해주세요.');
      email.select();
      return false;
    }
    else if(!email2){
        alert('이메일주소를 입력해주세요.');
        email2.select();
        return false;
    }
   
    else if(!pwd){
        alert('비밀번호를 입력해주세요.');
        pwd.select();
        return false;
    }
 
     
    else if(pwd != repwd){
        alert('비밀번호를 정확히 입력해주세요.');
        repwd.select();
        return false;
    }

    else if(pwd.length < 4 || pwd.length > 12){
        alert("비밀번호는 4~12자로 구성해 주세요.");
        pwd.select();
        return false;
    }
 
    else{
      alert('회원가입이 완료되었습니다.');
      window.open('login.html',"_self");
    }
 
  }
 
  function sel_email(){
    //alert("test");
    var sel_addr = document.getElementById("sel_addr");
    var a = sel_addr.options.selectedIndex;
    var b = sel_addr.options[a].value;
    email2.value = b
  }

로그인 html
<!DOCTYPE html>
<html>
<head>
  <title>.</title>
  <meta charset="utf-8">
  <link href="css/login.css" rel="stylesheet">
</head>
<body>
  <div class="login-form">
    <button type="button" class="back" value="" onClick="history.go(-1)">
        <img src="images/arrow.png">
    </button>
    <form>
      <input type="text" name="login_emailsum" id="login_emailsum" class="login_emailsum" placeholder="이메일">
      <input type="password" name="login_pwd" id="login_pwd" class="login_pwd" placeholder="비밀번호">
      <input type="button" onclick="submit_btn(this.form)" class="submit-btn"  value="로그인">
    </form>

    <div class="join">
      <a href="join.html">회원가입</a>
    </div>
  </div>
</body>
<script src="js/login.js"></script>
</html>

로그인 js
function submit_btn(){

  var emailsum = sessionStorage.getItem("emailsum");
  var pwd = sessionStorage.getItem("pwd");

  var login_emailsum = document.getElementById("login_emailsum").value;
  var login_pwd = document.getElementById("login_pwd").value;


    if(!login_emailsum){
      alert('이메일주소를 입력해주세요');
      login_emailsum.select();
      return false;
    }
 
    else if(!login_pwd){
        alert('비밀번호를 입력해주세요.');
        login_pwd.select();
        return false;
      }

    else if (emailsum === login_emailsum && pwd === login_pwd) {
      window.open('home.html',"_self");
      }
    else {
      alert('로그인 실패. 이메일 또는 비밀번호를 확인하세요.');
 
      }

  }

홈 html (home.html)
<!DOCTYPE html>
<html>
  <head>
    <title>.</title>
    <meta charset="utf-8" />
    <link href="css/h.css" rel="stylesheet" />
  </head>

  <body>
    <ul id="menu">
        <li><a href="login.html">login</a></li>
      </ul>
  </body>
</html>





#자바스크립트 로그아웃 #자바스크립트 로그인 로그아웃 #자바스크립트 자동 로그아웃

profile_image 익명 작성일 -

​

위의 방식 대로면 session storage에서 해당 키를 삭제하면 됩니다.

sessionStorage.removeItem("emailSum") sessionStorage.removeItem("pwd")

로 하면 됩니다. 또는

sessionStorage.clear()

를 사용하면 모든 session storage가 삭제됩니다.

​

다만 위의 구현은 전체적으로 문제가 있습니다. 일단 클라이언트에서 세션 스토리지에 데이터를 저장하게 되면 해당 컴퓨터에서만 사용이 가능할 뿐 아니라 회원 데이터가 누출되기 쉽습니다. 게다가 위의 경우에는 회원도 1명만 감안되어 있군요. 여러명 가입을 가능하게 하려면 email을 키로 하던지 하는 것이 맞겠습니다. (그러나 이렇게 해도 문제가 많습니다.)

​

제대로 하려면 서버를 별도로 구축해야 합니다.

​

​

(그냥 연습을 위해서 저렇게 만드셨다면 그건 상관없습니다)

​

​

그럼

연관된 질문 답변 리스트

자바스크립트 로그아웃 구현

회원가입하고 로그인까지 구현했는데 홈페이지에서 로그아웃을 구현하는 법을 모르겠어요 아래코드는 회원가입 html, js 로그인 html...

자바스크립트로 현재 페이스북에...

페이스북이 지금 이 브라우저에서 로그인중인지 로그아웃중인지 확인하는 방법은 어떻게 하나요? 자바스크립트 코드를 이용해서 어떻게 구현하는지...

이용해서 리액트로 로그인 구현 질문

리액트와 express의 세션 기능으로 로그인&로그아웃 하는 방법좀 설명해주세요. 먼저 리액트, 즉 자바스크립트에서 localStorage로 로그인을 했을 때 예를 들어 json web...

현재 접속중인 회원리스트를 구현하려...

... 그 오차를 줄이고자 세션값을 축소해 버리면 한페이지에 오래 있으면 페이지 이동시 로그아웃 되버립니다. 좀더 정확한 방법은 자바스크립트에 윈도우 창을 닫았을때...

자바 패널 새로고침 질문입니다.

... 자바 gui로 홈페이지를 구현하는 과제가 있습니다. 로그인/로그아웃같은 부분에서... 온통 자바스크립트 관련 글밖에 없어 질문 드립니다. 혹은 임의의 버튼을 두어...

php 로그인 로그아웃 관련

... 후에는 로그아웃으로 뜨게하려면 복잡한가요 ?? php로된 쇼핑몰 솔루션으로... php나 자바스크립트를 전혀 모르신다면 구현하기는 좀 힘드실 거같습니다.

jsp 비정상적인 졸요시 로그아웃처리...

... 비정상적으로 로그아웃을 할때 자바스크립트 function WinLogout() { var aaa=self.... 그게 아니라고 한다면 전체 사이트를 frameset 을 가지는 index.html 페이지로 구현...