반응형
HTML5에서는 클라이언트 측(브라우저)에 데이터를 임시로 저장할 수 있는 다양한 방법을 제공합니다. 목적과 저장 범위에 따라 아래와 같이 분류할 수 있습니다.
1. sessionStorage (세션 스토리지)
- 브라우저 탭 기준의 임시 저장소
- 탭을 닫으면 데이터는 자동 삭제
- 문자열만 저장 가능
📌 사용 예:
// 저장
sessionStorage.setItem('username', '홍길동');
// 읽기
let user = sessionStorage.getItem('username');
// 삭제
sessionStorage.removeItem('username');
✔ 특징:
- 탭 간 데이터 공유 ❌
- 탭을 새로 열면 데이터 초기화됨
- 보통 로그인 중 사용자 상태 저장에 사용
2. localStorage (로컬 스토리지)
- 브라우저에 영구적으로 저장
- 탭을 닫거나 브라우저를 꺼도 데이터 유지
- 역시 문자열만 저장 가능
📌 사용 예:
localStorage.setItem('token', 'abc123');
let token = localStorage.getItem('token');
localStorage.clear(); // 전체 삭제
✔ 특징:
- 도메인 기준으로 저장됨
- 세션을 넘어 장기 저장이 필요할 때 적합
sessionStorage와 사용법은 동일하지만, 저장 범위와 지속 기간이 다릅니다.
3. Cookies (쿠키)
- 서버 또는 클라이언트에서 사용 가능
- 데이터 크기 제한이 있고, HTTP 요청 시 자동 전송됨
- 만료 시간 설정 가능 (임시 or 영구)
📌 사용 예 (JS에서):
document.cookie = "user=John; path=/; max-age=3600"; // 1시간 유지
✔ 특징:
- 서버와 통신할 때 항상 전송됨 → 민감한 정보 저장은 주의
- 용량 제한 약 4KB
4. IndexedDB (고급: 비관계형 DB)
- 브라우저 내에 구조화된 대용량 데이터 저장 가능
- 비동기 API 사용, JSON 형태 등 저장 가능
- 웹 앱에서 로컬 캐시, 오프라인 데이터 저장에 유리
복잡하지만 파워풀합니다. 예: 오프라인 메모앱, Gmail 등
5. WebSQL (폐기됨)
- 과거에 존재했지만 표준에서 제외됨
- 현재는 사용 비권장
🔎 정리 비교표
항목 지속 시간 저장 크기 브라우저 간 공유 사용 예시
| sessionStorage | 탭 닫을 때까지 | 약 5MB | ❌ | 임시 로그인 상태 등 |
| localStorage | 무제한 | 약 5~10MB | ❌ | 장기 사용자 설정 |
| cookie | 설정한 시간 | 4KB | ✅ (요청마다 전송) | 로그인 토큰 등 |
| IndexedDB | 무제한에 가까움 | 수백 MB 가능 | ❌ | 대용량 캐시, 앱 DB |
반응형