쿠키(cookie) 개념 및 사용방법 (jQuery plugin) 및 주의사항 - 삽질중인 개발자

- jQuery plugin을 이용한 쿠키 사용 방법 -

쿠키는 웹사이트 접속 시 접속자의 기기에 다운로드되어 저장되는 텍스트 파일입니다. 이런 쿠키에는 이름, 값, 만료 날짜, 경로 정보가 들어있습니다.  

 

이러한 쿠키는 웹사이트가 접속자의 설정에 따라 작동하도록 해주는 역할을 예를들면 로그인 아이디 저장, 장바구니 등의 기능을 구현할 때 쓰거나 팝업창에 "오늘은 더 이상 보지 않음" 같은 설정값을 저장하는 용도 또는, 최근 검색어를 저장하여 사용자 맞춤 광고를 할 때 사용됩니다.

 

잘 쓰면 웹페이지의 성능도 향상되는 쿠키를 jQuery Plugin을 통하여 아주 간단하게 구현할 수 있습니다.

 

우선 jQeury를 이용해서 쿠키를 사용하기 위해서는 Plugin을 다운로드하여야 합니다.

 

jQuery Cookie | jQuery Plugin Registry

 

오른쪽에 있는 다운로드 클릭!

다운로드한 파일의 압축을 풀고 jquery.cookie.js 파일 프로젝트에 복사합니다.

 

 

1. 쿠키 생성 방법 & 옵션

$.cookie('cookieName', 'value'); //일회용 브라우저를 닫으면 사라지는 쿠키를 생성하는 방법

$.cookie('cookieName', 'value', { expires: 7 }); // 7일 후 만료되는 쿠키 생성  expires는 만료 기간

//path : 경로설정이다. 이 사이트의 모든 페이지가 해당된다면 / 이렇게 슬러시만 둔다. 그렇지 않고 특정 폴더라면 경로를 넣으면 된다.
$.cookie('cookieName', 'value', { expires: 7, path: '/' });// 전체 사이트에 대해 7일 뒤에 만료되는 쿠키 생성 

//domain : 쿠키가 적용될 도메인이다. 기본 설정은 쿠키가 만들어진 도메인이다.
$.cookie('cookieName', 'value', { expires: 7, path: '/' ,domain: 'test.com'});

 

2. 생성된 쿠키 읽는 방법

//키로 사용한 이름으로 값을 읽습니다. 
// 키로 저장된 값이 없으면 undefined 가 반환됩니다. 
$.cookie('cookieName'); 

// 모든 쿠키를 { "name": "value" } 형태의 객체로 반환
$.cookie();

 

3. 쿠키 삭제 방법

$.removeCookie('cookieName'); //쿠키 삭제 존재하는 쿠키를 삭제했을 경우는 true 반환 존재 안하는 쿠키 삭제 false 반환

$.cookie('cookieName', 'value', { path: '/' }); // 요런식으로 쿠키를 만들고

$.removeCookie('cookieName'); // 이런식으로 삭제하면 못 찾아서 false 반환

$.removeCookie('cookieName', { path: '/' }); // 만든 쿠키랑 동일하게 삭제해줘야 삭제가 된다.

 

 

쿠키 사용 시 주의 사항

쿠키는 300개까지 만들 수 있음. BUT 한 도메인에서는 20개가 최대

쿠키의 저장될 수 있는 최대 길이는 4,096바이트

쿠키는 로컬에 저장이 된다. 즉, 마음만 먹으면 볼 수 있다.-> 보안이 취약.