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

쿠키란?

• 만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일
• 종류:
  • Session Cookie: 메모리에만 저장, 브라우저 종료시 삭제
  • Persistent Cookie: 파일로 저장, 장기간 유지 가능, 브라우저 종료 상관 X
  • Secure Cookie: HTTPS에서 사용되는 암호화된 쿠키
  • Third Party Cookie: 광고 목적
• 동작 원리:
  • 클라이언트가 서버에 HTTP 요청
  • 서버가 HTTP 응답시 set-cookie를 통해 쿠키를 구워서 전달
  • 클라이언트는 이제부터 요청을 할때마다 헤더에 쿠키를 담아서 전달
  • 만료 기간 전이라면 쿠키는 브라우저에 저장
  • 만료 됐다면 새로 서버에 요청하여 쿠키를 새로 발급
• 쿠키 특징
  • 장점 :
    • 대부분의 브라우저가 지원
    • 데이터 유효기간 지정 가능
  • 단점 :
    • 매우 작은 데이터 저장 용량
    • http 요청시 같이 전달되서 서버에 부담
    • 유저 정보 도난 위험
    • 문자열만 저장 가능

웹 스토리지란?

• 클라이언트에 데이터를 저장하는 데이터 저장소
• 로컬 스토리지 VS 세션 스토리지
• key와 value 쌍의 형태로 데이터 저장
• window 객체의 프로퍼티로 존재
• 장점:
  • 서버에 불필요하게 데이터 저장 x
  • 넉넉한 데이터 저장 용량
  • 문자열 외에도 저장 가능
• 단점:
  • HTML5를 지원하는 브라우저만 사용 가능

로컬 스토리지와 세션 스토리지 차이점

• 로컬 스토리지는 데이터 영구 저장이 가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 스토리지가 초기화

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

• 쿠키: 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
  • 다시 보지 않음 쿠키 팝업창, 로그인 자동 완성
• 로컬 스토리지: 지속적으로 필요한 데이터 저장이 필요할 때
  • 자동 로그인
• 세션 스토리지: 일시적으로 필요한 데이터 저장이 필요할 때
  • 일회성 로그인, 입력 폼 저장, 비 로그인 장바구니