WebStorage

HTML5 API로 브라우저에 데이터를 저장하는 기술

1.기본 개념

1) 종류

SessionStorage : 처음 웹 애플리케이션에 접속했을 때 생성되고 브라우저를 종료하면 소멸되는 저장소
LocalStorage : 한 번 저장하면 브라우저 창을 닫더라도 계속 유지되는 저장소

2) 쿠키와 다른점

쿠키는 사용할 때 마다 서버로 전송을 해야 하지만 스토리지는 서버로 전송할 필요가 없습니다.(서버가 알 필요가 없는 경우, 오프 라인 상태에서도 가능)
쿠키는 서로 다른 언어가 사용해야 하기 때문에 문자열만 저장이 가능하지만 스토리지는 자바스크립트 만이 사용하기 때문에 자바스크립트의 모든 객체를 저장할 수 있습니다.
스토리지는 크기에 제한도 없습니다.

3) 생성을 할 필요가 없습니다.

자바스크립트 코드 안에서 sessionStorage, localStorage 라는 이름으로 사용하면 됩니다.

4) 메소드

데이터 저장 : localStorage["키이름"] = 데이터
데이터 읽기 : localStorage["키이름"]
데이터 수정은 존재하는 키이름에 데이터를 대입하면 됩니다.
삭제 : delete localStorage["키이름"]
전체 삭제 : localStorage.clear()

5) Storage는 하나의 객체를 가지고 데이터를 계속 저장하기 때문에 많은 양의 데이터를 저장하면 성능이 저하됩니다.

많은 양의 데이터를 저장해야 한다면 Indexed DB를 권장
예전에는 WebSQL 도 사용이 되었지만 존재하지 않는 브라우저도 있고 성능도 떨어져서 비추천

2.웹 스토리지를 이용한 아이디 저장

1) index.jsp 파일에 웹 스토리지를 이용한 파일의 링크를 생성

<a href="./webstorage/login.jsp">웹 스토리지를 이용한 아이디 저장</a><br/>

2) WebContent 디렉토리에 webstorage 디렉토리를 만들고 login.jsp 파일을 생성하고 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="./loginprocess.jsp" method="post" id="loginform">
        <label for="id">아이디</label>
        <input type="text" name="id" required="required" id="id"/>
        <br/>

        <label for="pw">비밀번호</label>
        <input type="password" name="pw" required="required" /><br/>

        <input type="checkbox" name="idsave" id="idsave" />아이디 저장<br/>
        <input type="submit" value="로그인" />
    </form>

    <script>
        //body에 있는 태그 찾아오기
        var loginform = document.getElementById("loginform");
        var ids = document.getElementById("id");
        var idsave = document.getElementById("idsave");

        //폼의 데이터를 submit 할 때 
        loginform.addEventListener("submit", function(e){
            //아이디 저장란에 체크가 되어 있으면 아이디 입력값을 로컬 스토리지에 저장
            //아이디 저장란에 체크가 되어 있지 않으면 아이디 입력값을 로컬 스토리지에서 제거
            if(idsave.checked == true){
                localStorage["id"] = ids.value;
            }else{
                delete localStorage["id"];
            }
        });

        //윈도우가 로드될 때 아이디 저장 여부를 확인해서 존재하면 표시
        window.addEventListener("load", function(e){
            if(localStorage["id"]){
                ids.value = localStorage["id"];
                idsave.checked = true;
            }else{
                ids.value = "";
                idsave.checked = false;
            }
        })

    </script>
</body>
</html>

Session

서버에 저장할 수 있는 내장 객체
jsp에서는 session이라는 이름으로 사용하면 되고 그 이외의 영역에서는 request객체.getSession() 이라는 메소드를 호출하면 HttpSession 타입의 객체를 리턴해 줍니다.
세션은 일반적으로 브라우저 당 1개씩 생성
처음 웹 애플리케이션에 접속하면 1개가 만들어지고 브라우저를 종료하면 세션이 소멸됩니다.
세션을 사용하는 목적은 브라우저가 접속되어 있는 동안 유지해야 하는 정보를 저장하거나 redirect 할 때 데이터를 전달
로그인을 했을 때 로그인 여부를 세션에 저장합니다.

1.세션에 데이터를 저장하고 읽어내기

void setAttribute(String name, Object value)

Object getAttribute(String name)

void removeAttribute(String name)

2.그 이외 메소드

메소드	내용
String getId()	Session의 ID 리턴
long getCreationTime()	세션이 생성된 시간
long getLastAccessedTime()	세션을 마지막으로 사용한 시간
void setMaxInactiveInterval(int second)	세션을 사용하지 않았을 때 자동으로 소멸되는 시간을 설정
int getMaxInactiveInterval()
void invalidate()	세션을 소멸

3.세션 만료 시간을 web.xml 파일에 설정

설정한 시간동안 세션을 사용하지 않으면 자동으로 세션이 소멸됩니다.
일정시간동안 아무런 동작도 취하지 않으면 로그아웃 되는 기능 구현에 이용

<session-config>
    <session-timeout>분단위 숫자</session-timeout>
</session-config>

실습 : 네이버 로그인 창과 유사한 형태 만들기

1) index.jsp 파일에 로그인 창으로 이동하는 링크 설정

<div id="content">
    <%
        out.println("<a href='login.jsp'>로그인</a><br/>");
    %>
</div>

2) WebContent 디렉토리에 login.jsp 파일을 생성하고 작성

아이디와 비밀번호 입력란을 만들고 로그인 버튼과 잘못입력해서 돌아온 경우 메시지를 출력할 영역을 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<style>
    #disp{
        color:red;
    }
</style>
</head>
<body>
    <%
        //세션에서 msg 키의 값을 가져옵니다.
        Object msg = session.getAttribute("msg");
        //값이 있다면 div를 만들어서 출력하고 삭제
        if(msg != null){
            out.println("<div id='disp'>" + msg + "</div>");
            session.removeAttribute("msg");
        }
    %>
    <form action="process.jsp" method="post">
        <label for="id">아이디</label>
        <input type="text" name="id" required="required"/><br/>

        <label for="pw">비밀번호</label>
        <input type="password" name="pw" required="required" /><br/>

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

</body>
</html>

3) 로그인을 처리하는 process.jsp 파일을 만들고 작성

id 가 root 이고 pw가 1234 인 경우 로그인 성공으로 처리하고 나머지 경우는 로그인 실패로 처리
데이터베이스에서 데이터를 찾아서 비교한 후 회원 정보를 가져와야 합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 처리</title>
</head>
<body>
    <%
        //파라미터 읽기
        String id = request.getParameter("id");
        String pw = request.getParameter("pw");

        if("root".equals(id) && "1234".equals(pw)){
            //로그인 성공 - 회원정보를 세션에 저장하고 결과 페이지로 redirect
            session.setAttribute("id", "root");
            session.setAttribute("nickname", "관리자");

            //메인 페이지로 리다이렉트
            response.sendRedirect("./");

        }else{
            //로그인 실패 - 메시지를 세션에 저장하고 로그인 페이지로 redirect
            session.setAttribute("msg", "없는 아이디이거나 잘못된 비밀번호입니다.");
            response.sendRedirect("./login.jsp");    
        }    
    %>
</body>
</html>

4) index.jsp 에서 로그인 된 경우와 그렇지 않은 경우 출력을 다르게 하기 위해서 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaweb0213</title>
</head>
<body>
    <a href="./cookie/cookiecreate.jsp">쿠키 생성</a><br/>
    <a href="./cookie/login.jsp">쿠키를 이용한 아이디 저장</a><br/>
    <a href="./webstorage/login.jsp">웹 스토리지를 이용한 아이디 저장</a><br/>
    <div id="content">
    <%
        //로그인 여부는 session의 id에 데이터가 있으면 로그인 한 것이고 없으면 로그인 안한 것입니다.
        Object id = session.getAttribute("id");
        if(id == null){
            out.println("<a href='login.jsp'>로그인</a><br/>");
        }else{
            out.println("<p>" + session.getAttribute("nickname") + "님 </p>");
            out.println("<p><a href='./logout.jsp'>로그아웃</a></p>");
        }
    %>
    </div>
</body>
</html>

로그아웃 처리

세션을 클리어하는 것으로 처리합니다.
로그인 되어 있다는 사실을 세션에 id 키에 데이터가 있다는 것으로 안 것이기 때문에 세션의 데이터를 전부 지우면 id 키의 데이터도 지워지므로 로그인이 되지 않은 것으로 간주

실습 : 로그아웃 처리

1) logout.jsp 파일을 만들고 로그아웃 처리

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <%
        //세션 삭제
        session.invalidate();
        //보통은 로그아웃하면 메인 페이지로 리다이렉트
        //response.sendRedirect("./");
    %>

    <h3>로그아웃 하셨습니다.</h3>
    <h4>5초 후에 메인 페이지로 이동합니다.</h4>
    <script>
        //5초 후에 ./ 로 이동
        setTimeout(function(){
            location.href = "./";
        }, 5000)
    </script>
</body>
</html>

일정 시간 동안 세션을 사용하지 않으면 자동으로 세션을 초기화

web.xml 파일에 session-config를 설정하면 됩니다.
2분동안 세션을 사용하지 않으면 세션이 자동으로 초기화되도록 web.xml 파일에 작성

<!-- 세션 초기화 시간 설정 -->
  <session-config>
      <session-timeout>2</session-timeout>
  </session-config>

로그인 한 정보를 무조건 세션에 저장?

로그인 한 정보를 세션에 무조건 저장하는 것은 고려를 해봐야 합니다.

로그인 한 회원이 많다면 세션에 저장하는 것은 서버에 부담을 가중시키게 됩니다.
세션은 서버에 저장을 합니다.
동시 접속자가 많은 경우에는 세션에는 구분하기 위한 키 값만 저장하고 나머지 정보는 데이터베이스에 저장해서 필요할 때 마다 데이터베이스에서 불러오는 형태로 만듭니다.

5.webstorage