쿠키란?
서버가 사용자의 웹 브라우저에 전송하는 작은 크기의 조각, 브라우저는 그 데이터 조각들을 저장해 놓았다가 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용
쿠키의 주요 목적
-
세션 관리 : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
-
개인화 : 사용자 선호, 테마 등의 세팅
-
트래킹 : 사용자 행동을 기록하고 분석하는 용도
과거에는 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용하곤 했지만, 모든 요청마다 쿠키가 함께 전송되기 때문에 성능이 떨어지는 원인이 될 수 있다. 정보를 클라이언트 측에 저장하려면 Modern APIs의 종류인
웹 스토리지 API(localStorage,sessionStorage) 와 IndexedDB 를 사용
쿠키의 구성
Name : 키
Value : 값
Domain : 사용하는 도메인
Path : 접근경로
Expires/max-age : 쿠키 만료일 (설정이 없다면 브라우저가 닫힐때 쿠키는 사라짐)
HttpOnly : HTTP외에 통신허용 여부
Secure : 보안설정
쿠키 이용법
Set-Cookie
서버에서 사용자 브라우저에 쿠키를 전송하기 위해 사용
Set-Cookie:<cookie-name>=<cooke-value>;
// 여러개도 가능
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly
document.cookie : 프로퍼티를 이용해 브라우저에서 쿠키에 접근 가능
웹 스토리지?
기존 쿠키의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다. HTML5 이전에는 으용 프로그래이 데이터를 요청할 때마다 매번 쿠키에 그 정보를 저장했지만, 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 한다.
로컬 스토리지 (localStorage) : 브라우저 종료시에도 유지되는 데이터를 저장할 수 있는 객체
세션 스토리지 (sessionStorage) : 하나의 세션만을 위한(새로고침해도 유지되는) 데이터를 저장하는 객체
localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.
쿠키와 차이점
-
요청 헤더에 포함되지 않는다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
-
클라이언트에서만 조종이 가능하다.
-
해당 URL에서만 접근이 가능하다.
스토리지 접근
// 웹 스토리지 쓰기
// 1. 로컬 스토리지 쓰기
localStorage.setItem("key",value);
localStorage.key = value;
// 2. 세션 스토리지 쓰기
sessionStorage.setItem("key",value);
sessionStorage.key = value;
//웹 스토리지 접근
// 1. 로컬 스토리지 접근
localStorage.getItem('key');
localStorage.key;
// 2. 세션 스토리지 접근
sessionStorage.getItem('key');
sessionStorage.key;
//웹 스토리지 삭제
// 1. 로컬 스토리지 삭제
localStorage.removeItem('key');
localStorage.clear();
// 2. 세션 스토리지 삭제
sessionStorage.removeItem('key');
sessionStorage.clear();
