🍪 쿠키 (cookie)
- 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어 졌다.
- 서버에 HTTP 요청을 보내면 요청으로는 누가 보낸 것인지 모르므로 쿠키에 정보를 담아서 보내면 쿠키를 통해 서버는 요청자를 파악한다.
- 4KB 용량 limit
- 한 사이트당 20개의 쿠키 limit
- 만료기한을 지정할 수 있다.
코드
쿠키 저장
날짜 정보는 Date 객체를 사용해 toGMTString() 함수로 변경해서 날짜 문자열을 생성해서 사용한다.
쿠키 값은 특수문자나 2바이트 문자 처리를 위해서 escape() 함수로 이스케이핑을 하는 것을 추천한다.
escape() 함수
알파벳과 숫자 및 *,@,-,+,.,/를 제외한 문자를 모두 16진수 문자로 바꿔준다.
쉼표와 세미콜론 같은 문자가 쿠키 문자열과의 충돌을 피하기 위해 사용
unescape() 함수
이 함수로 이용해 원상태로 복구 할 수 있다.
//쿠키 저장
// expiredays 는 일자 정수 - 365년 1년 쿠키
// setCookie(변수이름, 변수값, 기간);
function setCookie(key, value, expiredays) {
let todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays); // 현재 시각 + 일 단위로 쿠키 만료 날짜 변경
//todayDate.setTime(todayDate.getTime() + (expiredays * 24 * 60 * 60 * 1000)); // 밀리세컨드 단위로 쿠키 만료 날짜 변경
document.cookie = key + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
}
setCookie('snack', 'Kitkat', 30); // key: snack, value: Kitkat인 쿠키를 30일간 저장쿠키 삭제
쿠키는 별도의 삭제 기능이 없고 만료시간이 현재시간 이전이면 만료되어 삭제 되므로, 만료 시간을 현재 시간이전으로 설정하고 기존 쿠키를 덮어쓰면 된다.
//쿠키 삭제
//쿠키는 삭제가 없어서 현재 시각으로 만료 처리를 함.
// delCookie(변수이름);
function delCookie(key){
let todayDate = new Date();
document.cookie = key + "=; path=/; expires=" + todayDate.toGMTString() + ";" // 현재 시각 이전이면 쿠키가 만료되어 사라짐.
}
delCookie('snack'); // snack 쿠키 삭제 쿠키 읽기
정규표현식을 이용해 쿠키들을 분리하고, 일치하는 쿠키 키를 가진 쿠키를 반환한다.
setCookie()함수는 escape()함수로 이스케이핑을 했으므로 unescape()함수로 복원한다.
// 쿠키 읽기
// getCookie(변수이름);
function getCookie(key) {
const value = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); // 쿠키들을 세미콘론으로 구분하는 정규표현식 정의
return value? unescape(value[2]) : '';
};
getCookie('snack'); // Kitkat쿠키 수정
쿠키는 같은 키가 있으면 기존 쿠리를 덮어쓰므로 별도로 정의할 필요가 없다.
setCookie()로 기존 쿠리를 덮어쓰면 된다.
// 쿠키 수정
setCookie('snack', 'pie', 20); // snack의 value를 pie로 기간을 20일로 변경쿠키 종류
세션 쿠키 (session cookie)
- 만료 날짜/시간을 지정하지 않으면, '메모리에 있는 동안' 계속 유효하다고 판단하도록 세션 쿠키에 저장된다.
- 세션 쿠키는 사용자가 사이트 탐색 시에 관련한 설정들과 선호사항을 저장하는 임시 쿠키다.
- 세션 쿠키는 브라우저 메모리에 저장되므로 브라우저가 종료되면 쿠키는 사라지게 된다.
- 세션 쿠키의 값은 보안상 꽤나 안전한 브라우저(ex. 구글 크롬)의 메모리에 저장되기 때문에 보안에 유리하다.
지속 쿠키 (persistent cookie)
- 만료 날짜/시간을 지정하면 프로세스가 종료되더라도(메모리에서 사라지더라도) 특정 만료날짜/시간까지 유효하므로 지속 쿠키에 저장된다.
- 지속 쿠키는 파일로 저장되므로 브라우저가 종료되어도 쿠키는 남아있게 된다.
- 지속 쿠키는 웹 서버로부터 받을 때 유효기간이 세팅되어 있다. 유효기간이 만료 되면 그때 파기된다.
장점
- 대부분의 브라우저가 지원한다.
단점
- 매 HTTP 요청마다 포함되어 api호출로 서버에 부담이 될수있다.
- 용량이 작음 (약 4KB)
- SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다. (CSRF 취약)
사용 예 (example)
- 다시 보지 않음 팝업 창
- ID 정보 저장 > 로그인 상태 유지
- 최근 검색한 광고 추천
- 쇼핑몰 장바구니 저장 기능
[참조] https://velog.io/@guswlsapdlf/Session-Cookie-Persistent-Cookie
[참조] https://jeong-pro.tistory.com/80
[참조] https://it-eldorado.tistory.com/90
[참조] https://triplexlab.tistory.com/114
