[Codeit;] 쿠키, 세션 스토리지, 로컬 스토리지 이해하기

1. 쿠키

• 서버로부터 리스폰스로 쿠키를 받음 ➡️ 클라이언트: 웹 브라우저가 알아서 저장 & 리퀘스트를 보낼 때도 웹 브라우저가 알아서 보냄
• 자바스크립트를 통해 쿠키 값 추가, 수정, 참조 가능
• 수명을 지정 가능, 수명이 다한 쿠키는 자동으로 삭제

서버: 리스폰

Set-Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;

 

클라이언트: 전송

Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;

 

//도메인 지정 -> 서브 도메인 리퀘스트 시에도 쿠키 전송 
Domain='웹 사이트 주소'

//쿠키 전송 경로 지정
Path=

//쿠키 자바스크립트 사용 금지(해킹 예방)
HttpOnly

//HTTPS 리퀘스트 전송 시에만 쿠키를 전송
SameSite=None
Secure

//제 3자 사이트 쿠키 전송 금지
SameSite=Strict
SameSite=Lax
SameSite=None

2. 세션 스토리지와 로컬 스토리지

세션 스토리지

• 현재 탭에서만 유효한 저장소
• 탭을 닫으면 데이터 소멸
• 다른 탭과 데이터는 공유 X

// 값을 저장하는 코드. (이미 값이 있다면) 수정하는 코드
const data = inputElement.value;
sessionStorage.setItem('draft', data);
// 값을 참조해서 사용할 때
const draftData = sessionStorage.getItem('draft');
// 값 지우기
sessionStorage.removeItem('draft');

 

로컬 스토리지

• 해당 사이트에서 유효한 저장소
• 탭을 닫거나 브라우저를 닫아도 데이터 유지
• 여러 탭 사이에서도 데이터가 공유

// 사용자가 사이드바 감추기 버튼을 클릭했을 때
// 값을 저장, 수정
localStorage.setItem('show-sidebar', 'false');
// 사용자가 처음 접속했을 때
const showSidebar = localStorage.getItem('show-sidebar') === 'true';
// 값 지우기
localStorage.removeItem('show-sidebar');

3. 활용 사례

로그인

- 세션 기반 인증

1. 처음에 세션 ID ➡️ 쿠키로 전송

2. 로그인 성공 시 서버 쪽에서 세션 상태 업데이트

 

- 토큰 기반 인증

1. 로그인에 성공

2. 서버: 토큰 발급 ➡️ 쿠키로 전송

 

하루동안 팝업 다시 보지 않기

1. 클라이언트: 수명이 1일인 쿠키 생성

2. 다음에 접속 시: 이 쿠키를 확인 ➡️ 팝업 X

 

장바구니

1. 처음 세션 ID ➡️ 쿠키로 전송

2. 세션 ID 기반으로 서버에서 장바구니 정보 저장