브라우저 저장소 (Local/Session Storage, Cookie)

브라우저 저장소는 크게 쿠키와 웹 스토리지가 있다.

로컬스토리지와 세션스토리지는 웹스토리지에 속하는데.. 이들에 대해서 한번 정리해 보자.

 

쿠키

웹 사이트에 접속할 때 생성되는 정보를 담은 작은 텍스트 파일이다.
별도로 삭제처리하거나 유효기간이 만료되지 않는 이상 삭제되지 않고 서버와 통신할 때 자동으로 주고받는다.

내가 만든 쿠키~~

쿠키는 주로 이런 목적을 위해 사용된다.

• 세션 관리
  • 서버에 저장되는 로그인이나 장바구니 같은 기능에 사용
• 개인화
  • 테마나 사용자가 선호하는 값을 세팅
• 트래킹
  • 사용자의 행동을 기록하고 분석

 

쿠키는 웹스토리지처럼 클라이언트에서 직접 추가/수정/삭제를 할 수 있고, 클라이언트에 저장되기 때문에 보안에 취약하다.

 

쿠키를 추가해보기 🤔

서버에 특정 API 요청을 했을 때 서버가 응답 시 header 안에 set-cookie 속성으로 쿠키 정보를 담아주면,
응답을 받은 브라우저는 쿠키를 브라우저에 자동으로 저장한다.
(저장된 쿠키정보는 개발자도구 → 애플리케이션 → 저장용량 → 쿠키에서 확인 가능)

Set-Cookie: <cookie-name>=<cookie-value>

 

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco

 

브라우저는 쿠키 헤더로 모든 쿠키를 최신화할 수 있다.

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco;

 

 

웹 스토리지

웹 스토리지는 브라우저에서 key-value 형식으로 값을 저장할 수 있는 저장소다.
로컬 스토리지와 세션 스토리지가 있다.

 

로컬 스토리지

• 브라우저를 열었다가 닫아도 데이터가 남아있다.
• 브라우저 캐시나 로컬 저장 데이터를 지우지 않는 이상 유효기간 없이 데이터가 저장된다.
• 다크모드, 자동 로그인 등에 사용된다.
• 셋 중 가장 큰 용량을 가지고 있다.

 

세션 스토리지

• 세션이 유지되는 동안만 유효하다.
• 브라우저나 탭이 닫히면 데이터가 사라진다.
• 저장 공간이 쿠키보다 크다.

 

출처

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies
https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API