브라우저 저장소 종류 / 쿠키, 세션 차이점

요약

웹 저장소/브라우저 저장소(Web Storage === Browser storage)

웹 저장소(Web Storage)

• 웹 데이터를 클라이언트에 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소

• 키-값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회한다.

• 쿠키와 달리 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험성이 없다.

• 오리진(도메인, 프로토콜, 포트) 단위로 접근이 제한되는 특성 덕분에 CSRF(Cross-Site Request Forgery)공격으로부터 안전하다.

• 오직 문자열(string) 데이터 타입만 지원한다.

• 웹 저장소 특징
1. 서버 전송이 없다 : 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송이 이루어지지 않기 때문에, 네트워크 트래픽 비용을 줄여준다.
2. 단순 문자열을 넘어 객체 정보를 저장할 수 있다
3. 용량의 제한이 없다.
4. 영구 데이터 저장이 가능하다.

• 내부적으로는 로컬 저장소(Local Storage)와 세션 저장소(Session Storage)가 분리되어 데이터 지속성에 따라 선택적으로 사용이 가능하다.

로컬 저장소(Local Storage)

• 브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장된다.

• 오리진(도메인, 프로토콜, 포트) 별로 생성되며, 다른 오리진의 로컬 스토리지에는 접근이 불가능하다.

• 서로 다른 브라우저 탭이라도 동일한 오리진이라면 동일한 로컬 스토리지를 사용한다.

• 지속적으로 필요한 정보를 저장하기에 좋다

세션 저장소(Session Storage)

• 세션 쿠키와 달리, 탭/윈도우 단위로 생성된다.

• window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데이터가 삭제된다.

• 동일한 탭/윈도우라도 다른 오리진이라면 또 다른 세션 스토리지가 생성된다.

• 잠시 동안 필요한 정보를 저장하기에 좋다.

로컬 저장소vs 세션 저장소

쿠키와 세션

쿠키(Cookie)

• 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 클라이언트에 만들어진 저장소

• 쿠키의 데이터는 키-값으로 구성되어 String 형태로 이루어져 있습니다.

• SameSite 옵션이 Strict가 아닐 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다(CSRF 취약)

• 대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재한다.

• 쿠키의 목적
1. 세션관리 : 서버가 알아야될 정보(로그인, 사용자 정보, 접속시간, 활동기록 등)
2. 개인화 : 사용자에 맞는 페이지/광고 제공
3. 트래킹 : 사용자 행동 및 패턴 분석

• 쿠키의 구성 요소
• 이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
• 값 : 쿠키의 이름과 관련된 값
• 유효시간 : 쿠키의 유지시간
• 도메인 : 쿠키를 전송할 도메인
• 경로 : 쿠키를 전송할 요청 경로

세션(Session)

• 사용자 정보를 클라이언트에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.

• 서버에서 클라이언트를 구분하기 위해 세션 ID를 부여한다.

• 접속 시간에 제한을 두어 일정 시간 응답이 없으면 정보가 유지되지 않게 설정 가능하다.

• 데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 되어 서버에 부담을 줄 수 있다(성능 저하의 요인이 될 수 있습니다)

쿠키와 세션의 차이

참고 자료