로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage) 차이

 

 

HTML5에서 제공하는 클라이언트 측 저장소입니다. 둘 다 데이터를 브라우저에 저장하며, 서버와의 통신 없이 데이터를 사용할 수 있습니다. 하지만 데이터의 저장 기간과 용도 측면에서 차이가 있습니다.

---

 

1. 로컬 스토리지(Local Storage)

정의

• 브라우저에 영구적으로 데이터를 저장할 수 있는 클라이언트 측 저장소.
• 브라우저를 닫아도 데이터가 삭제되지 않으며, 사용자가 명시적으로 삭제하거나 브라우저 캐시를 지우기 전까지 유지됩니다.

특징

• 저장 기간: 영구적.
• 저장 용량: 대부분의 브라우저에서 약 5~10MB.
• 데이터 범위: 동일한 도메인에서만 접근 가능.
• 데이터 형식: 문자열(String)로 저장.

// 데이터 저장
localStorage.setItem('key', 'value');

// 데이터 읽기
const value = localStorage.getItem('key');
console.log(value); // 'value'

// 데이터 삭제
localStorage.removeItem('key');

// 모든 데이터 삭제
localStorage.clear();

 

장점

1. 데이터가 영구적으로 유지되어 반복적인 다운로드 필요 없음.
2. 비교적 큰 용량을 저장할 수 있음.
3. 서버 통신 없이 빠르게 데이터에 접근 가능.

단점

1. 민감한 데이터 저장 시 보안 문제.
2. XSS 공격에 노출될 가능성 있음.
3. 데이터가 클라이언트에만 저장되므로 다른 디바이스에서는 사용할 수 없음.

---

2. 세션 스토리지(Session Storage)

정의

• 브라우저 세션 동안 데이터를 저장하는 클라이언트 측 저장소.
• 브라우저 탭을 닫으면 데이터가 자동으로 삭제됩니다.

특징

• 저장 기간: 브라우저 세션(탭)이 종료될 때까지.
• 저장 용량: 대부분의 브라우저에서 약 5MB.
• 데이터 범위: 동일한 도메인에서만 접근 가능.
• 데이터 형식: 문자열(String)로 저장.

// 데이터 저장
sessionStorage.setItem('key', 'value');

// 데이터 읽기
const value = sessionStorage.getItem('key');
console.log(value); // 'value'

// 데이터 삭제
sessionStorage.removeItem('key');

// 모든 데이터 삭제
sessionStorage.clear();

 

장점

1. 동일 세션 내에서 빠르게 데이터를 저장하고 읽기 가능.
2. 데이터가 세션 동안만 유지되므로 민감한 데이터를 일시적으로 저장하기에 적합.
3. 다른 탭에서는 접근할 수 없으므로 탭별로 고유 데이터를 관리 가능.

단점

1. 브라우저 탭을 닫으면 데이터가 사라짐.
2. 저장 용량이 상대적으로 작음.
3. 민감한 데이터 저장 시 보안 문제.

---

로컬 스토리지와 세션 스토리지의 주요 차이점

특징	로컬 스토리지 (Local Storage)	세션 스토리지 (Session Storage)
데이터 유지 기간	영구적	브라우저 탭 종료 시 삭제
저장 용량	약 5~10MB	약 5MB
스코프	도메인 전체	현재 브라우저 탭에서만 유효
보안성	세션 종료 후에도 데이터 유지로 더 취약	세션 동안만 유지로 비교적 안전
사용 사례	장기적인 데이터 저장 (테마, 언어 설정 등)	일시적인 데이터 저장 (폼 입력 값 등)

 

---

로컬 스토리지와 세션 스토리지의 사용 사례

로컬 스토리지 사용 사례

1. 사용자 설정:
   • 다크 모드, 언어 설정 등 장기적으로 유지되어야 하는 사용자 환경.
2. 캐싱:
   • 네트워크 요청 없이 데이터를 로드하기 위해 JSON이나 텍스트를 저장.
3. 저장된 사용자 데이터:
   • 쇼핑 카트, 즐겨찾기와 같은 지속적인 데이터.

세션 스토리지 사용 사례

1. 폼 데이터:
   • 사용자가 브라우저를 새로고침하거나 실수로 뒤로 가기를 눌렀을 때 데이터를 유지.
2. 탭별 데이터 관리:
   • 서로 다른 탭에서 데이터를 고유하게 유지.
3. 일회성 데이터:
   • 임시 메시지, 페이지 간 데이터 전달 등.

---

로컬 스토리지와 세션 스토리지의 보안 고려사항

1. 민감한 데이터 저장 금지
   • 암호, 토큰 등 민감한 정보는 저장하지 않는 것이 좋음.
   • 대신 서버-세션 관리나 안전한 쿠키를 사용하는 것이 권장.
2. XSS 방지
   • 로컬/세션 스토리지는 JavaScript에서 접근 가능하므로, XSS 공격에 취약.
   • Content Security Policy(CSP)를 설정하거나 데이터를 암호화해 저장.
3. HTTPS 사용
   • HTTPS 환경에서만 데이터를 저장하고 전송하여 스니핑 공격을 방지.

---

결론

• 로컬 스토리지는 데이터가 장기적으로 유지되어야 할 때 적합.
• 세션 스토리지는 브라우저 세션 동안 데이터가 필요한 경우 적합.
• 보안 및 데이터 민감도를 고려해 적절한 저장 방식을 선택해야 하며, 필요 시 다른 클라이언트 저장 방식(쿠키, IndexedDB 등)과 조합해 사용하는 것이 중요합니다. 😊