Session Storage / Local Storage

개요

간단한 로그인 페이지(HTML)를 통해 "jwt 토큰을 이용하여 인증을 거친 후 로비 페이지로 이동하는 로직을 만들어보자!" 라고 생각했지만... 처음부터 장애물에 막혀버렸다!!!

 

 

jwt 토큰을 로그인 페이지에서 로비 페이지로 어떻게 넘겨주지...?

 

그 때부터 구글링을 열심히 했다... 정말 열심히... 그렇게 알게 된 사실!

local Storage라는 것을 이용하면 데이터를 넘겨줄 수 있다네???

 

바로 적용!

 

다행히도 local Storage를 이용하니 머릿속으로 구상하던 것을 쉽게 이뤄낼 수 있었다. 그렇게 무난하게 다음 로직을 생각하는데...

 

......이거 왜 로그인이 중복되지?

이게 무슨 뜻이냐면, 유저 A가 로그인하고 유저 B가 로그인했을 때, 유저 B의 토큰이 A의 로컬 스토리지에도 저장되는 것을 확인해버렸다... 새로고침을 했을 때 바로 중복 로그인이 된다는 말이다!!! 찾아보니 로컬 스토리지는 같은 탭에서 테스트를 진행할 시 로컬 스토리지가 공유된다고 한다. 그래서 Chrome 시크릿 모드를 사용하거나 새 창을 띄어 시도 해봤는데 다 실패... 컴퓨터 2대로 해볼까... 하다가 테스트인데... 굳이...?

 

그래서 급하게 다른 방법이 없나 이것저것 살펴보던 중 Session Storage라는 저장소도 있다는 것을 발견했던 것이다!

 

보통 로그인을 관리할 때는 로컬 스토리지로 관리한다던데, 나는 테스트를 위해 세션 스토리지를 이용하기로 했다. 그럼 이제 Local Storage와 Session Storage의 특징을 살펴보자!!!

 

정의

Session Storage와 Local Storage 모두 브라우저에 데이터를 저장하는 클라이언트 측 저장소로, 주로 작은 양의 데이터를 키-값 쌍으로 저장할 때 사용된다. 둘의 차이는 주로 데이터의 수명과 범위에 있다.

 

Session Storage

일시적이거나 특정 페이지 내에서만 필요한 데이터를 저장할 때 사용하는 저장소.

 

Session Storage 특징

• 브라우저 탭이 열려 있는 동안에만 데이터를 유지하며, 탭을 닫으면 저장된 데이터는 사라진다.
• 같은 탭 내에서만 데이터를 공유할 수 있어, 탭을 새로 열면 다른 세션 스토리지가 만들어진다.
• 대부분의 브라우저에서 약 5MB 정도의 데이터를 저장할 수 있다.

 

Session Storage 사용 예시

// 데이터 저장
sessionStorage.setItem("user", "A");

// 데이터 불러오기
let user = sessionStorage.getItem("user");

// 데이터 삭제
sessionStorage.removeItem("user");

// 전체 데이터 삭제
sessionStorage.clear();

 

Local Storage

브라우저를 닫았다 열어도 유지해야 하는 데이터를 저장할 때 사용하는 저장소.

 

Local Storage 특징

• 사용자가 데이터를 수동으로 삭제하거나, 브라우저 설정에서 캐시를 지우기 전까지는 데이터가 유지된다.
• 도메인 단위로 저장되며, 동일한 도메인에서만 접근이 가능하다.
• 대부분의 브라우저에서 약 5MB 정도의 데이터를 저장할 수 있다.
• 사용자 설정, 테마, 로그인 상태 유지 등에 사용된다.

 

Local Storage 사용 예시

// 데이터 저장
localStorage.setItem("user", "A");

// 데이터 불러오기
let user = localStorage.getItem("user");

// 데이터 삭제
localStorage.removeItem("user");

// 전체 데이터 삭제
localStorage.clear();