네비게이션 바를 열어둔 채로 브라우저를 종료하거나 다른 페이지로 이동했을 때, 네비게이션 바가 동일하게 열린 형태로 나오는 스크립트를 짜야 했다. 네비게이션 바가 열려있었다는 정보를 어떻게 저장하면 좋을까 찾아보다가 선택하게 된 것이 쿠키다.
쿠키란?
쿠키는 브라우저를 사용하는 환경에서 서버가 사용자의 웹 브라우저에 보내는 작은 데이터 조각으로, 브라우저에 쿠키를 저장했다가 나중에 요청하면 데이터를 다시 서버로 보낼 수 있다.
쿠키가 있으면 웹사이트에서 사용자의 방문에 관한 정보 등 브라우저에서의 정보를 기억하여 다음번에 사이트에 방문했을 때 번거로운 작업을 피하고 더 유용하게 사이트를 활용할 수 있다.
동작 방식
- 클라이언트가 페이지 요청
- 서버에서 쿠키 생성
- HTTP 헤더에 쿠키를 포함 시켜 응답
- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관함
- 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답
쿠키의 유형
자사 쿠키
사용자가 방문한 웹사이트의 서버에 의해 저장되어 이용자의 온라인 행태정보에 대한 분석 데이터를 수집하고 맞춤형 설정 등을 그대로 유지하는 것을 의미한다.
- 지속 쿠키(Persistent Cookie): 브라우저를 종료해도 해당 사이트에 지정해둔 설정이 남음
- 세션 쿠키(Session Cookie): 브라우저를 종료하면 정보가 삭제됨
제3자 쿠키
사용자가 방문한 웹사이트의 운영자가 아닌 제 3자가 설치한 쿠키로, 추적 쿠키(Tracking Cookies)라고도 불린다. 제3자 쿠키는 사용자가 여러 웹사이트에서 활동한 내역을 추적하는 크로스 사이트(cross-site) 추적이 가능하다.
주사용 목적
- 세션 관리(Session management): 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 개인화(Personalization): 사용자 선호, 테마 등의 세팅
- 트래킹(Traking): 사용자 행동을 기록하고 분석하는 용도
장단점
장점
- 편리한 사용자 경험을 제공한다.
- 데이터를 다시 서버에 요청할 필요가 없어 속도가 빠르다.
- 서버에 정보 요청 빈도 수가 줄어들어 서버 부하가 낮다.
단점
- 개인 정보를 수집하기 때문에 프라이버시 침해를 일으킬 수 있다.
- 보안에 취약하다.
- 저장할 수 있는 쿠키가 제한되어 있다.
- 한 클라이언트에 300개의 쿠키를 저장 가능
- 한 도메인 당 20개의 쿠기만 가질 수 있음
- 하나의 쿠키값은 4kb까지 저장 가능
- 초과시 오래된 쿠키부터 자동 삭제
사용 방법
구성 요소
- 이름(Name): 각각의 쿠키를 구별하는 데 사용되는 이름
- 값(Value)
옵션유효시간(Expires): 쿠키 유지 시간- 유지 시간 미지정시 세션 쿠키로 동작함
- 유지 시간을 과거로 지정하면 쿠키값이 삭제 됨
- 만료기간(max-age) 옵션으로 바꿔 사용해도 됨
옵션도메인(Domain): 쿠키를 전송할 도메인옵션경로(Path): 쿠키를 전송할 요청 경로
쿠키 설정
document.cookie = "name=value";
// 함수형
function setToggleCookie(name, value) {
document.cookie = `${name}=${value};`;
}쿠키 읽기
console.log(document.cookie); // cookie1=value1; cookie2=value2; cookie3=value3;
// value 값 얻기
function getToogleCookie(name) {
let cookieName = `${name}=`;
let result = "";
const cookieArr = document.cookie.split(";");
for (let i = 0; i < cookieArr.length; i++) {
if (cookieArr[i][0] === " ") {
cookieArr[i] = cookieArr[i].substring(1);
}
if (cookieArr[i].indexOf(cookieName) === 0) {
result = cookieArr[i].slice(cookieName.length, cookieArr[i].length);
return result; // value
}
}
return result; // ""
}쿠키 삭제
function deleteToggleCookie(key) {
setToggleCookie(key, "", {
"max-age": -1,
});
}마무리
쿠키에 대해 공부하니 다른 데이터 저장 방식들이 많이 나왔다. 나중에는 세션, 로컬 스토리지, 세션 스토리지를 작성하여 4가지를 비교해 봐야 겠다.
출처
박선우