쿠키

쿠키 : 웹사이트 접속시 접속자의 개인장치에 다운로드되고 브라우저에 저장되는 작은 텍스트 파일. 웹사이트는 쿠키를 통해 접속자의 장치를 인식하고 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장.

• 클라이언트에 300개까지 저장가능하며 도메인당 20개 값 저장.
• 용량 : 4KB
• Response Header 에 set-cookie 속성을 사용하여 쿠키 생성
• 사용자가 요청하지 않아도 브라우저가 Request 시에 Request Header를 넣어 자동으로 서버에 전송

웹스토리지

웹 스토리지 : 서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 지원. 로컬 스토리지와 세션 스토리지로 나뉨.

• 간단한 key-value 스토리지 형태
• 용량 : 5~10MB
• 쿠키와 달리 자동전송의 위험이 없음
• 오리진 단위로 접근이 제한되어 CSRF로부터 안전
• 오직 문자형(string) 데이터 타입만 지원

로컬 스토리지 : 브라우저에 반영구적으로 데이터를 저장하며 브라우저를 종료해도 데이터가 유지됨. 브라우저 자체에 반영구적으로 데이터가 유지되지만 도메인이 다른 경우는 스토리지 접속 불가능.

• 사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 브라우저에 남아있음 (영구성)
• 단, 동일한 브라우저를 사용할 때만 해당
• 지속적으로 필요한 데이터 저장 (자동로그인 등)

세션 스토리지 : 각 세션마다 데이터가 개별적으로 저장됨. 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장. 로컬 스토리지와 다르게 세션 종료시 데이터가 자동으로 제거됨. 같은 도메인이라도 세션이 다르면 데이터 접근 불가능.

• 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에 윈도우나 브라우저 탭을 닫을 경우 제거
• 일시적으로 필요한 데이터 저장 (일회성 로그인정보, 입력폼 등)

쿠키와 웹스토리지의 차이점 : 쿠키는 더 작고 모든 HTTP 요청과 함께 서버 정보를 다시 전달해주지만 로컬 스토리지는 더 크고 클라이언트 측에 정보를 보유할 수 있다.