[ DangleDangle ] 로그인 상태 관리 : sessionStorage를 활용한 로그인 처리
웹 애플리케이션에서 데이터를 클라이언트 측에 저장할 때 localStorage와 sessionStorage를 자주 사용합니다. 이 두 가지는 모두 웹 스토리지 API의 일부로, 브라우저에서 데이터를 저장하고 관리하는 데 도움을 줍니다.
이번 블로그에서는 localStorage와 sessionStorage의 차이점, 각각의 특징과 사용법 그리고 sessionStorage를 활용하여 로그인 상태를 관리하는 방법에 대해 다뤄보겠습니다.
1. localStorage란 ?
localStorage는 웹 브라우저에 데이터를 영구적으로 저장할 수 있는 공간을 제공합니다. 사용자가 브라우저를 종료하더라도 데이터는 유지되며, 데이터는 브라우저의 세션이 끝날 때까지 계속 남아있습니다. 다른 웹 페이지나 탭에서도 동일한 localStorage 데이터를 접근할 수 있습니다.
1) 특징
• 영구적 저장: 브라우저를 종료해도 데이터가 유지됩니다.
• 저장 용량: 보통 5MB 정도의 데이터를 저장할 수 있습니다. (브라우저에 따라 다를 수 있음)
• 동기적 접근: localStorage는 동기적으로 동작하며, 데이터의 읽기/쓰기가 빠릅니다.
2) 사용법
✱ 저장하기
localStorage.setItem('username', 'shyunu');
✱ 불러오기
const username = localStorage.getItem('username');
console.log(username); // 'shyunu'
✱ 삭제하기
localStorage.removeItem('username');
✱ 전체 삭제하기
localStorage.clear();
2. sessionStorage란 ?
sessionStorage는 localStorage와 매우 유사하지만, 브라우저 세션이 끝날 때 데이터를 삭제하는 특징이 있습니다. 즉, 사용자가 브라우저 탭을 닫거나 새로 고침을 하면 데이터가 사라집니다. sessionStorage는 한 세션(탭) 내에서만 유효하며, 다른 탭이나 브라우저에서 공유되지 않습니다.
1) 특징
• 세션 기반 저장: 브라우저 탭이 닫히면 데이터가 삭제됩니다.
• 저장 용량: localStorage와 유사하게 5MB 정도의 데이터를 저장할 수 있습니다.
• 동기적 접근: sessionStorage도 localStorage와 마찬가지로 동기적으로 동작합니다.
2) 사용법
✱ 저장하기
sessionStorage.setItem('sessionId', 'shyunu');
✱ 불러오기
const sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId); // 'shyunu'
✱ 삭제하기
sessionStorage.removeItem('sessionId');
✱ 전체 삭제하기
sessionStorage.clear();
3. localStorage vs sessionStorage
| 특징 | localStorage | sessionStorage |
| 데이터 지속성 | 브라우저를 종료하고 다시 열어도 데이터가 유지됨 | 브라우저 탭을 닫으면 데이터가 삭제됨 |
| 데이터 공유 | 동일 도메인 내 다른 탭에서도 데이터가 공유됨 | 동일 탭 내에서만 데이터가 공유됨 |
| 용량 | 약 5MB (브라우저마다 차이 있음) | 약 5MB (브라우저마다 차이 있음) |
| API | localStorage.setItem, localStorage.getItem |
sessionStorage.setItem, sessionStorage..getItem |
| 사용 용도 | 사용자 설정, 로그인 정보 등 지속적인 데이터 저장 | 세션 상태 유지, 임시 데이터 저장 등 |
| 보안 | 보안 취약할 수 있음 (민감한 데이터 저장 X) | 세션 종료 시 데이터 삭제로 보안이 상대적으로 안전함 |
4. 용도에 따른 Storage 선택 방법
• localStorage 사용하기: 사용자가 로그인한 상태를 브라우저를 종료하더라도 유지하고 싶을 때 적합합니다. 예를 들어, 자동 로그인, 언어 설정, 테마 설정 등 사용자가 앱을 종료하고 다시 시작해도 설정을 유지하려는 경우에 유용합니다.
• sessionStorage 사용하기: 사용자가 세션 내에서만 로그인 상태를 유지하고, 탭을 닫으면 자동으로 로그아웃되기를 원할 때 적합합니다. 예를 들어, 일회성 로그인, 민감한 정보 처리 등이 필요할 때 유용합니다.
5. sessionStorage로 DangleDangle 프로젝트 로그인 상태 관리하기
로그인 상태를 관리하는 데 있어, sessionStorage는 매우 유용합니다. 사용자가 로그인하면, 해당 세션에서만 로그인 상태를 유지하고, 브라우저 탭을 닫으면 자동으로 로그아웃 처리가 되기 때문입니다.
1) 로그인 시 sessionStorage에 정보 저장하기
사용자가 로그인하면, 로그인 정보를 sessionStorage에 저장할 수 있습니다. 예를 들어, 사용자 ID와 로그인 상태를 저장합니다.
sessionStorage.setItem('isLoggedIn', 'true');
sessionStorage.setItem('userId', 'shyunu');
2) 로그인 상태 확인하기
페이지가 로드될 때, sessionStorage에서 로그인 정보를 확인하여 사용자가 로그인 상태인지를 판단할 수 있습니다.
const isLoggedIn = sessionStorage.getItem('isLoggedIn') === 'true';
3) 로그아웃 시 정보 삭제하기
사용자가 로그아웃하면, sessionStorage에서 로그인 정보를 삭제하여 로그인 상태를 초기화할 수 있습니다.
sessionStorage.removeItem('isLoggedIn');
sessionStorage.removeItem('userId');
6. 왜 sessionStorage가 로그인 상태 관리에 적합한가 ?
1) 세션 종료 시 자동 로그아웃
sessionStorage의 가장 큰 장점은 세션 종료 시 자동으로 데이터가 삭제된다는 것입니다. 사용자가 브라우저 탭을 닫으면 로그인 정보가 자동으로 삭제되므로, 자동으로 로그아웃되며 보안 위험을 줄일 수 있습니다. 사용자가 로그아웃을 명시적으로 하지 않아도, 세션이 종료되면 정보가 사라집니다.
2) 보안 강화
sessionStorage는 세션 동안만 유효하기 때문에, 클라이언트 측에서 저장된 로그인 정보가 오래 유지되지 않아 보안상 유리합니다. 반면, localStorage는 브라우저를 종료하고 다시 열어도 데이터가 유지되므로, 장기간 로그인 상태를 유지하려면 보안 취약점이 될 수 있습니다. 따라서 민감한 정보를 저장할 때 sessionStorage를 사용하는 것이 더 안전합니다. 🔐
3) PostgreSQL과의 연동
서버 측에서는 PostgreSQL과 같은 데이터베이스를 사용해 사용자의 로그인 정보를 관리하는 것이 좋습니다. sessionStorage는 클라이언트 측에서 로그인 상태만 관리하고, 서버에서 인증 및 세션을 관리하는 방식으로, 보다 안전하고 효율적으로 로그인 상태를 처리할 수 있습니다.