Cookie vs Local Storage vs Session

쿠키, 로컬 스토리지, 세션 비교

쿠키

• 만료 기한이 있는 Key, Value 형태의 저장소
• 장점 : 대부분의 브라우저가 지원
• 단점
  • 매 HTTP요청마다 포함되어 api호출로 서버에 부담.
  • 쿠키의 용량이 작음 (약 4Kb)
  • 암호화 존재 x -> 사용자 정보 도난 위험1. 쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생.

웹스토리지

• 쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생.
• 종류 : 로컬스토리지, 세션스토리지.
• 웹스토리지는 Key와 Value 형태로 이루어짐.
• 웹스토리지는 클라이언트에 대한 정보를 저장.
• 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장.
• 로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장
  ex) 자동 로그인 저장
• 세션스토리지는 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제
  ex) 입력 폼 정보 저장
• 장점
  • 서버에 불필요하게 데이터를 저장하지 않는다.
  • 용량이 크다. (약 10/5Mb, 브라우저마다 차이 존재)
• 단점
• HTML5를 지원하지 않는 브라우저의 경우 사용 불가

쿠키, 로컬스토리지, 세션스토리지 사용예

• 자동 로그인 -> 로컬스토리지
• 입력 폼 정보 -> 세션스토리지
• 비로그인 장바구니 -> 세션스토리지
• 다시 보지 않음 팝업 창 -> 쿠키

각각의 정보 저장 및 호출

• 쿠키

// 쿠키에 저장. key="A", value=1, 유효기간=7초
setCookie("A", 1, 7)
// 저장된 쿠키 호출
getCookie("A") (Key == A)

• 로컬 스토리지

// 로컬 스토리지에 저장
localStorage.A = 1 (Key == A, Value = 1)
localStorage.setItem("A", 1)
// 호출
localStorage.A
localStorage.getItem("A")

• 세션 스토리지

// 저장
sessionStorage.A = 1 
sessionStorage.setItem("A", 1)
// 호출
sessionStorage.A 
sessionStorage.getItem("A")