쿠키(Cookie)와 웹 스토리지(Web Storage)

쿠키(Cookie)

브라우저에 저장되는 작은 크기의 문자열이다. 쿠키를 활용하여 HTTP 통신의 무상태 프로토콜(Stateless) 특성을 보완할 수 있다. 하지만, 쿠키에 모든 상태정보를 저장하는 것은 보안에 취약하고 용량의 한계가 있어 대부분 상태정보는 서버 측 세션에 저장하고, 해당 세션 ID를 쿠키에 저장하여 사용한다.

 

특징

• 도메인 단위로 데이터를 공유
• 도메인마다 저장할 수 있는 쿠키의 개수는 20개(브라우저에 따라 다름)
• 쿠키의 데이터 크기는 약 4KB로 제한
• 만료시간 설정 가능
• HTTP 요청 시 자동으로 요청 헤더에 Cookie에 값을 포함하여 전달

 

읽기

document.cookie에 name=value 형태로 저장되고, 각 값은 ;(세미콜론)으로 구분된다.

 

쓰기

• 클라이언트에서 document.cookie에 값을 할당

document.cookie = "key=value" // 해당 key 값만 갱신

• HTTP 응답 시 응답 헤더에 Set-Cookie에 값이 포함된 경우 브라우저에 저장

 

옵션

• path
  • 설정 시 지정된 URL의 경로 및 하위 경로의 페이지만 쿠키에 접근할 수 있다.
  • 기본 값(미지정)은 현재 경로이고, 값은 절대 경로이어야 한다.
• domain
  • 설정 시 쿠키에 접근 가능한 도메인을 지정할 수 있다.(서브 도메인도 공유 가능)
• expires / max-age
  
  • expires는 유효 일자(GMT 포맷), max-age는 만료 기간(초)을 지정할 수 있다.(영구 쿠키)
  • 미지정된 쿠키 값은 브라우저 종료 시 삭제된다.(세션 쿠키)
  • max-age는 음수 값 설정 시 삭제된다.
• secure
  • 설정 시 HTTPS 통신에서만 쿠키가 전송된다.
  • 기본 설정은 프로토콜을 따지지 않는다.
• samesite
  • 크로스 사이트 요청 위조(XSRF) 공격을 막기위한 옵션
  • Lax, Strict 설정 시 동일한 사이트에서만 쿠키를 전달할 수 있게 설정
• httpOnly
  • 스크립트가 쿠키를 사용할수 없게 하는 옵션
  • document.cookie를 사용하여 조회 및 조작할 수 없음

 

웹 스토리지(Web Storage)

브라우저 내에 key-value 문자열 쌍을 저장할 수 있게 해주는 객체로 HTML5 부터 추가 되었다. localStorage와 sessionStorage가 두 종류가 있다.

 

웹 스토리지 객체

• setItem(key, value) - 저장
• getItem(key) - 조회
• removeItem(key) - 해당 key-value 삭제
• clear() - 모든 key-value 삭제
• key(index) - 인덱스(index)에 해당하는 키 조회
• length - 저장된 항목의 개수

 

특징

• 대부분의 브라우저에서 최소 5MB 이상 저장 가능
• 쿠키와 달리 HTTP 헤더를 통한 조작 불가
• 프로토콜, 도메인, 포트로 정의된 origin에 분류되어, 셋 중 하나라도 다른 경우 접근할 수 없다.

 

Local Storage

• origin이 동일한 경우 브라우저 내 모든 탭, 창에서 값 공유
• 새로고침 시 데이터 보존
• 종료 시 데이터 보존

 

Session Storage

• 브라우저 내 현재 탭과 내부 iframe에서 값 공유
• 새로고침 시 데이터 보존
• 종료 시 데이터 삭제