Local Storage와 Session Storage는 둘 다 웹 브라우저에서 데이터를 클라이언트 측에 저장할 수 있는 방법이지만, 사용 목적과 특성이 다릅니다. 다음은 두 저장소의 차이점을 정리한 설명입니다.
1. 수명 (Lifetime)
- Local Storage:
- 데이터는 명시적으로 삭제될 때까지 지속됩니다. 사용자가 브라우저를 종료하거나 컴퓨터를 재부팅해도 데이터는 남아 있습니다.
- 즉, 한 번 저장된 데이터는 브라우저 내에서 지속적으로 사용 가능합니다.
- Session Storage:
- 데이터는 브라우저 세션이 종료될 때까지 유지됩니다.
- 탭이나 창을 닫으면 해당 탭이나 창에서만 저장된 데이터는 삭제됩니다. 따라서 브라우저를 닫거나 새로고침할 때마다 데이터가 사라집니다.
2. 저장 공간 크기 (Storage Capacity)
- Local Storage:
- 일반적으로 브라우저마다 약 5MB에서 10MB 정도의 저장 용량을 제공합니다.
- Session Storage:
- 보통 Local Storage와 비슷한 크기의 용량을 제공하지만, 브라우저에 따라 약간의 차이가 있을 수 있습니다.
3. 데이터 접근성 (Data Accessibility)
- Local Storage:
- 동일한 도메인 내의 모든 탭이나 창에서 접근 가능합니다. 즉, 같은 도메인이라면 브라우저의 다른 탭이나 창에서도 저장된 데이터를 공유할 수 있습니다.
- Session Storage:
- 세션별로 분리되어 있어, 같은 도메인이라도 서로 다른 탭이나 창에서 데이터를 공유할 수 없습니다. 각 탭/창마다 독립적인 저장소를 갖습니다.
4. 사용 예시
- Local Storage:
- 사용자가 사이트를 재방문할 때 지속적인 상태를 유지하고 싶을 때 유용합니다. 예를 들어, 사용자 설정이나 테마, 인증 토큰 등을 저장하는 데 사용됩니다.
- Session Storage:
- 일시적인 데이터를 저장할 때 유용합니다. 예를 들어, 특정 페이지에서만 유효한 데이터나 탭 간에 공유되지 않는 정보를 저장하는 데 사용됩니다.
5. API 사용법
두 저장소 모두 JavaScript를 사용해 동일한 방식으로 접근할 수 있습니다.
// Local Storage
localStorage.setItem('key', 'value');
let data = localStorage.getItem('key');
// Session Storage
sessionStorage.setItem('key', 'value');
let data = sessionStorage.getItem('key');6. 보안 (Security)
둘 다 클라이언트 측에 데이터를 저장하므로, 민감한 정보(예: 암호, 개인 식별 정보 등)를 저장하는 것은 바람직하지 않습니다. 이러한 데이터는 서버 측에서 안전하게 관리되어야 합니다.
이렇게 Local Storage와 Session Storage는 수명, 접근성, 저장 공간 등의 측면에서 차이가 있으며, 각각의 특성에 맞게 사용해야 합니다.