세션스토리지(SessionStorage)의 개념과 사용 방식
세션스토리지는 웹 브라우저에서 탭 단위로 데이터를 저장하는 저장소입니다. HTML5에서 도입된 Web Storage API 중 하나로, 사용자의 세션이 유지되는 동안만 데이터를 저장합니다.
주요 특징
- 탭 단위 저장: 동일한 오리진이라도 탭을 새로 열면 새로운 세션스토리지가 생성됩니다.
- 세션 기반 유지: 브라우저 또는 탭을 닫으면 데이터가 자동 삭제됩니다.
- 저장 가능한 데이터: 문자열만 저장 가능 (JSON은 stringify/parse 처리 필요)
- 크기 제한: 일반적으로 5MB 내외 (브라우저마다 다름)
실무에서의 활용 예시
- 로그인 중인 유저의 일시적인 UI 상태 저장 (예: 열려있는 탭, 활성화된 탭 등)
- 페이지 이동 간 일시적 정보 전달
- 브라우저 탭 간 데이터 격리가 필요한 경우 (보안성 확보 목적)
쿠키(Cookie)의 개념과 작동 방식
쿠키는 작은 데이터 조각을 클라이언트의 브라우저에 저장하고, 서버와의 요청 시마다 함께 전송되는 데이터 저장소입니다. HTTP 요청/응답의 일부로 동작하며, 브라우저 외부에서도 서버와 통신이 가능합니다.
주요 구성 요소
- 이름(name), 값(value): key-value 구조
- 만료일(Expires, Max-Age): 설정하지 않으면 세션 쿠키로 간주
- 도메인(Domain), 경로(Path): 쿠키 적용 범위 설정
- Secure, HttpOnly, SameSite: 보안 관련 속성
브라우저 저장 위치
- 요청/응답 헤더에 자동 포함 (Cookie / Set-Cookie)
- 개발자 도구 > Application > Cookies에서 확인 가능
실무에서의 활용 예시
- 로그인 인증 정보 저장 (세션 ID)
- 방문자 추적 및 애널리틱스
- 사용자 맞춤형 설정 유지 (언어, 테마 등)
주의사항
- 크기 제한: 한 쿠키당 4KB 이하, 하나의 도메인당 약 20개까지 저장 가능
- 보안 민감: 항상 Secure, HttpOnly, SameSite 속성 설정 권장
로컬스토리지(LocalStorage)의 개념과 특징 정리
로컬스토리지는 브라우저가 제공하는 지속적인 클라이언트 측 저장소입니다. HTML5 Web Storage API의 일부로, 데이터는 명시적으로 삭제되지 않는 한 유지됩니다.
주요 특징
- 영속적 저장: 브라우저나 탭을 닫아도 데이터가 유지됩니다.
- 도메인 기반 격리: 같은 도메인에서만 접근 가능
- 저장 용량: 약 5~10MB 수준의 저장 공간 제공
- 문자열 기반 저장: JSON 데이터는 직접 직렬화하여 저장
실무 활용 예시
- 유저 환경 설정값 저장 (다크모드, 언어 등)
- 비회원 장바구니 기능
- 서버 요청 감소를 위한 클라이언트 캐시
주의사항
- 민감 정보 저장 금지
- XSS 공격에 대비한 보안 처리 필요
LocalStorage vs 캐시 vs 오리진 정책: 웹 저장소와 보안 핵심
1. 로컬스토리지(LocalStorage)의 개념과 구조적 특징로컬스토리지(LocalStorage)는 HTML5에서 도입된 Web Storage API의 일부로, 브라우저가 제공하는 클라이언트 측의 영구 저장소입니다. 쿠키처럼 문자열
mint10.tistory.com
로컬스토리지, 세션스토리지, 쿠키의 공통점과 차이점 상세 비교
| 항목 | 로컬스토리지(LocalStorage) | 세션스토리지(SessionStorage) | 쿠키(Cookie) |
| 저장 위치 | 브라우저 (영구 저장) | 브라우저 탭 (세션 단위 저장) | 브라우저 및 서버 (자동 전송) |
| 수명 | 브라우저가 삭제 전까지 유지 | 탭 닫으면 삭제 | 만료일 설정 가능, 없으면 세션까지 유지 |
| 데이터 전송 | 클라이언트에만 존재 | 클라이언트에만 존재 | 서버로 자동 전송 (HTTP 요청 시 포함) |
| 보안 옵션 | 별도 없음 (XSS에 취약) | 별도 없음 | Secure, HttpOnly, SameSite 설정 가능 |
| 용량 제한 | 5~10MB | 5~10MB | 약 4KB |
| 문자열 저장 여부 | O (문자열만 저장) | O | O |
| API 접근 방식 | localStorage.setItem() | sessionStorage.setItem() | document.cookie |
| 도메인 범위 | 동일 오리진만 접근 가능 | 동일 오리진만 접근 가능 | 설정된 도메인 및 경로만 접근 가능 |
실무 판단 기준
- 쿠키: 서버와 함께 인증이 필요한 경우 (예: 세션 ID 저장)
- 로컬스토리지: 브라우저 내 캐시성 데이터, 장기 설정 보존
- 세션스토리지: 새로 고침 또는 탭 간 유지 필요 없는 일시적 상태
요약
- 세션스토리지는 탭 단위로 임시 데이터를 저장하며, 탭을 닫으면 자동 삭제됩니다.
- 쿠키는 서버와의 통신에 포함되어 인증, 추적 등에 주로 사용되며 보안 설정이 가능합니다.
- 로컬스토리지는 클라이언트에서 영구적으로 데이터를 저장할 수 있는 공간으로, 서버와는 직접 관련이 없습니다.
- 이 세 가지 저장소는 데이터의 수명, 보안, 접근 범위, 서버 통신 여부 등에 따라 선택 기준이 달라지며, 상황에 맞게 적절히 선택하는 것이 중요합니다.
'CS 공부일지 > 네트워크 공부일지' 카테고리의 다른 글
| HTTP 상태 코드의 모든 것: 개발자를 위한 실무 가이드 및 면접 대비 (0) | 2025.04.13 |
|---|---|
| 로그인 세션 vs 토큰 인증 완전정리 (Access, Refresh, 실무적용 비교) (0) | 2025.04.13 |
| LocalStorage vs 캐시 vs 오리진 정책: 웹 저장소와 보안 핵심 (0) | 2025.04.12 |
| 웹 브라우저 캐시 완벽 정리: Cache-Control, ETag, 캐시 무효화까지 (0) | 2025.04.12 |
| TLS 핸드셰이크: 데이터 보안을 위한 필수 과정 (0) | 2025.04.12 |
세션스토리지(SessionStorage)의 개념과 사용 방식
세션스토리지는 웹 브라우저에서 탭 단위로 데이터를 저장하는 저장소입니다. HTML5에서 도입된 Web Storage API 중 하나로, 사용자의 세션이 유지되는 동안만 데이터를 저장합니다.
주요 특징
- 탭 단위 저장: 동일한 오리진이라도 탭을 새로 열면 새로운 세션스토리지가 생성됩니다.
- 세션 기반 유지: 브라우저 또는 탭을 닫으면 데이터가 자동 삭제됩니다.
- 저장 가능한 데이터: 문자열만 저장 가능 (JSON은 stringify/parse 처리 필요)
- 크기 제한: 일반적으로 5MB 내외 (브라우저마다 다름)
실무에서의 활용 예시
- 로그인 중인 유저의 일시적인 UI 상태 저장 (예: 열려있는 탭, 활성화된 탭 등)
- 페이지 이동 간 일시적 정보 전달
- 브라우저 탭 간 데이터 격리가 필요한 경우 (보안성 확보 목적)
쿠키(Cookie)의 개념과 작동 방식
쿠키는 작은 데이터 조각을 클라이언트의 브라우저에 저장하고, 서버와의 요청 시마다 함께 전송되는 데이터 저장소입니다. HTTP 요청/응답의 일부로 동작하며, 브라우저 외부에서도 서버와 통신이 가능합니다.
주요 구성 요소
- 이름(name), 값(value): key-value 구조
- 만료일(Expires, Max-Age): 설정하지 않으면 세션 쿠키로 간주
- 도메인(Domain), 경로(Path): 쿠키 적용 범위 설정
- Secure, HttpOnly, SameSite: 보안 관련 속성
브라우저 저장 위치
- 요청/응답 헤더에 자동 포함 (Cookie / Set-Cookie)
- 개발자 도구 > Application > Cookies에서 확인 가능
실무에서의 활용 예시
- 로그인 인증 정보 저장 (세션 ID)
- 방문자 추적 및 애널리틱스
- 사용자 맞춤형 설정 유지 (언어, 테마 등)
주의사항
- 크기 제한: 한 쿠키당 4KB 이하, 하나의 도메인당 약 20개까지 저장 가능
- 보안 민감: 항상 Secure, HttpOnly, SameSite 속성 설정 권장
로컬스토리지(LocalStorage)의 개념과 특징 정리
로컬스토리지는 브라우저가 제공하는 지속적인 클라이언트 측 저장소입니다. HTML5 Web Storage API의 일부로, 데이터는 명시적으로 삭제되지 않는 한 유지됩니다.
주요 특징
- 영속적 저장: 브라우저나 탭을 닫아도 데이터가 유지됩니다.
- 도메인 기반 격리: 같은 도메인에서만 접근 가능
- 저장 용량: 약 5~10MB 수준의 저장 공간 제공
- 문자열 기반 저장: JSON 데이터는 직접 직렬화하여 저장
실무 활용 예시
- 유저 환경 설정값 저장 (다크모드, 언어 등)
- 비회원 장바구니 기능
- 서버 요청 감소를 위한 클라이언트 캐시
주의사항
- 민감 정보 저장 금지
- XSS 공격에 대비한 보안 처리 필요
LocalStorage vs 캐시 vs 오리진 정책: 웹 저장소와 보안 핵심
1. 로컬스토리지(LocalStorage)의 개념과 구조적 특징로컬스토리지(LocalStorage)는 HTML5에서 도입된 Web Storage API의 일부로, 브라우저가 제공하는 클라이언트 측의 영구 저장소입니다. 쿠키처럼 문자열
mint10.tistory.com
로컬스토리지, 세션스토리지, 쿠키의 공통점과 차이점 상세 비교
| 항목 | 로컬스토리지(LocalStorage) | 세션스토리지(SessionStorage) | 쿠키(Cookie) |
| 저장 위치 | 브라우저 (영구 저장) | 브라우저 탭 (세션 단위 저장) | 브라우저 및 서버 (자동 전송) |
| 수명 | 브라우저가 삭제 전까지 유지 | 탭 닫으면 삭제 | 만료일 설정 가능, 없으면 세션까지 유지 |
| 데이터 전송 | 클라이언트에만 존재 | 클라이언트에만 존재 | 서버로 자동 전송 (HTTP 요청 시 포함) |
| 보안 옵션 | 별도 없음 (XSS에 취약) | 별도 없음 | Secure, HttpOnly, SameSite 설정 가능 |
| 용량 제한 | 5~10MB | 5~10MB | 약 4KB |
| 문자열 저장 여부 | O (문자열만 저장) | O | O |
| API 접근 방식 | localStorage.setItem() | sessionStorage.setItem() | document.cookie |
| 도메인 범위 | 동일 오리진만 접근 가능 | 동일 오리진만 접근 가능 | 설정된 도메인 및 경로만 접근 가능 |
실무 판단 기준
- 쿠키: 서버와 함께 인증이 필요한 경우 (예: 세션 ID 저장)
- 로컬스토리지: 브라우저 내 캐시성 데이터, 장기 설정 보존
- 세션스토리지: 새로 고침 또는 탭 간 유지 필요 없는 일시적 상태
요약
- 세션스토리지는 탭 단위로 임시 데이터를 저장하며, 탭을 닫으면 자동 삭제됩니다.
- 쿠키는 서버와의 통신에 포함되어 인증, 추적 등에 주로 사용되며 보안 설정이 가능합니다.
- 로컬스토리지는 클라이언트에서 영구적으로 데이터를 저장할 수 있는 공간으로, 서버와는 직접 관련이 없습니다.
- 이 세 가지 저장소는 데이터의 수명, 보안, 접근 범위, 서버 통신 여부 등에 따라 선택 기준이 달라지며, 상황에 맞게 적절히 선택하는 것이 중요합니다.
'CS 공부일지 > 네트워크 공부일지' 카테고리의 다른 글
| HTTP 상태 코드의 모든 것: 개발자를 위한 실무 가이드 및 면접 대비 (0) | 2025.04.13 |
|---|---|
| 로그인 세션 vs 토큰 인증 완전정리 (Access, Refresh, 실무적용 비교) (0) | 2025.04.13 |
| LocalStorage vs 캐시 vs 오리진 정책: 웹 저장소와 보안 핵심 (0) | 2025.04.12 |
| 웹 브라우저 캐시 완벽 정리: Cache-Control, ETag, 캐시 무효화까지 (0) | 2025.04.12 |
| TLS 핸드셰이크: 데이터 보안을 위한 필수 과정 (0) | 2025.04.12 |
