🤓 세션(Session) | 세션의 개념, sessionStorage와 LocalStorage

 

세션이란 무엇일까?

 

서버와 클라이언트가 연결된 상태를 세션이라고 한다. 

 

📌  세션의 특징

1. 서버측에서 클라이언트 브라우저 정보를 확인한다.

 

2. 만약 처음 만나는 브라우저일 경우 유일한 ID를 부여한 후에 그것을 서버가 가지고 있는다. 

        let token = SHA256(credential.username).toString();
        //sessionid라는　토큰이　생기면　이것을　session에　넣는다．　
        // SESSIONS.push(`session_id=${token}`);
        SESSIONS.push(token)
        // console.log(SESSIONS);
        response.writeHead(200, {
          'set-cookie' : `session_id=${token}`
        })

 

3. 일반적으로 이 유일한 클라이언트 ID가 서버에서 존재하는 상황을 Session이라고 한다. 
     -> 브라우저를 켜고 있을때만 연결이 된다. 

 

4. 각 클라이언트 ID의 Session 객체마다 Data를 관리할 수 있다. 
    -> session객체에 이 클라이언트는 언제 접속을 했었는지 등 클라이언트 관련 정보를 넣을 수도 있다. 

   ex) xxx님이 3초 전에 접속했습니다. 

 

5. 쿠키와 다르게 세션은 서버 측에서 보안상 중요한 데이터를 관리하기 때문에 안전하다. 

 

 

 

---

 

 

세션 스토리지(sessionStorage)  VS 로컬 스토리지(localStorage)

세션 스토리지와 로컬 스토리지는 HTML5에서 추가된 저장소이다. 키와 값으로 정보를 스토리지에 저장할 수 있다. 클라이언트 측에서 저장되는 정보이기 때문에 보안상 민감한 정보는 저장하면 안 된다. 

 

프로젝트를 진행할 때 세션 스토리지와 로컬 스토리지를 자주 사용했다. 로컬 스토리지를 사용하여 로그인을 유지하였고, 세션 스토리지를 사용하여 알람 유지 기능을 구현했었다. 

 

📌  세션 스토리지 

세션 스토리지는 브라우저 탭을 닫을 경우 데이터가 삭제된다. 그래서 일회성 로그인 등 잠깐 정보를 저장할 때 사용할 수 있는 저장소이다. 

 

 

🙄 세션 스토리지로 로그인, 로그아웃 구현하기

 

실제 프로젝트에서 로그인, 로그아웃을 구현했던 방법이다.

 

1. 로그인 버튼을 누르면 서버로 요청이 간다. 

2. 서버에서 로그인 정보를 확인한 후, 로그인이 될 경우, 클라이언트로 db에 저장된 고유 id값을 보내준다. (1,2,3,...등)

3. 클라이언트 측에서는 응답을 받고, 받은 id값을 sessionStorage에 넣어준다. 

        window.sessionStorage.setItem("id", response.id);

 

4. 다른 페이지로 라우팅이 될 때 sessionStorage에 id값이 있는지를 확인하여 로그인을 유지하였다. 만약 id값이 없을 경우에는 로그인 페이지로 가도록 라우팅을 하였다. 

      <Route exact path="/home" render={() => {
        if (window.sessionStorage.getItem("id")) {
          return <Home />
        } else{
           return <Redirect to="/signin" />
        }
       }}/>

 

5. 로그아웃 버튼을 누르면 sessionStorage의 데이터가 삭제되도록 하였다. 

   window.sessionStorage.clear();

 

 

 

 

📌  로컬 스토리지

로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다. 

 

🙄 알람 on, off 여부 저장하기 

 

알람 삭제하는 것과 다르게 사용자가 설정한 알람의 on, off 여부를 유지하는 것이 어려웠다. sessionStorage를 사용하면, 로그아웃 후 다시 로그인을 했을 때 on, off여부가 반영되지 않는다는 문제점이 있었다. 

 

그래서 로컬 스토리지에 아래와 같이 알람리스트의 고유 id값과 on,off 여부를 key와 value로 저장하여서 관리하였다. 알람 핸들러를 만들어서 on,off 버튼을 클릭할 때마다 작동되도록 하였다.

 

   alarm_onHandler(id, checked) {
    window.localStorage.setItem(id, checked);
   }

 

 

그리고 알람을 아예 삭제했을 때, localStorage에서 지워지도록 이벤트를 걸어주었다.  

  window.localStorage.removeItem(e.target.value);

 

 

 

 

 

세션 스토리지로 로그인을 유지했을 경우 생기는 보안상의 문제점에 대해서도 좀 더 찾아보아야겠다.