쿠키(HTTP cookie)

• HTTP의 일종
• 사용자가 웹 사이트 방문할 경우
  • 사용자의 컴퓨터나기기에 작은 텍스트 파일로 저장되는 데이터
• HTTP는 기본적으로 connectionless(응답 후 연결 끊는 특징)과 stateless(통신 끝나면 상태 유지 X)특성을 갖기 때문에 쿠키(와 세션)을 사용
  • 장바구니
  • 최근 방문 정보
  • 로그인 정보
  • ...

쿠키 형식

요소	내용
쿠키명	쿠키를 구별하는 데사 용하는 요소 / 필수 요소
쿠키값	해당 쿠키의 값을 나태내는 요소 / 필수 요소
쿠키명=쿠키값 (필수) ex. id=dooboocookie
expire	만료시점 / 기본 값 : 브라우저가 닫힐 때 자동 삭제 expires = new Date() + (10일);
path	쿠키를 전송할 요청 경로
domain	쿠키를 전송할 도메인
secure	보안

쿠키 저장

• 요소들을 ; 로 이어서 document.cookie속성에 문자열로 저장
• 같은 요소 이름을 저장 시 덮어 씌워짐

var cname = "id";
var cvalue = escape("두부쿠키");
// escape()함수를 사용하여  %16값으로 변환
var expireday = new Date();
expireday.setDate(expireday.getDate()+10);//현재 시간으로부터 10일 후 날짜
document.cookie = cname + "=" + cvalue + "; expires="+ expireday.toUTCString() +";";
//"id=두부쿠키; expires=(10일 뒤 날짜형);" 의 형태로 저장 

쿠키 검색

• document.cookie 속성
  • 해당 경로에 모든 쿠키 정보를 반환
  • 문자열형으로 반환
    • "쿠키명1=쿠키값1; 쿠키명2=쿠키값2; 쿠키명3=쿠키명3;..."
    • 마지막 쿠키에는 ;이 생략

console.log(document.cookie);
//"id=%uB450%uBD80%uCFE0%uD0A4; age=29"

• 크롬에서 확인
  • 설정 → 개인정보 및 보안 → 쿠키 및 기타 사이트 데이터 → 모든 쿠키 및 사이트 데이터 보기 → 검색

쿠키 삭제

• 만료일을 오늘보다 이전 날짜로 덮어 씌워 삭제

var cname = "id";
var expireday = new Date();
expireday.setDate(expireday.getDate()-10);//현재 시간으로부터 10일 전 날짜
document.cookie = cname + "=; expires="+ expireday.toUTCString() +";";
//id이름 갖는 쿠키 파기