java-school logo

자바스크립트로 쿠키 다루기

쿠키란 키-값 쌍의 작은 데이터인데, 파기 날짜, 도메인, 경로, 보안 정보를 추가적으로 가진다.
서버 자원에서 쿠키 객체를 생성하면 쿠키 정보가 문자열로 응답의 헤더에 추가되어 웹 브라우저에 전달된다.
웹 브라우저는 다음 요청부터 이 쿠키 정보를 요청 헤더에 담아 요청과 함께 보내게 된다.

자바스크립트에는 document.cookie 구문을 사용해 쿠키를 다룬다.
결론적으로 자바스크립트는 쿠키를 굽고 세팅하고 제거할 수 있다.

쿠키를 굽고 읽고 삭제하는 사용자 정의 함수

자바스크립트에서 쿠키를 쉽게 다루기 위해 다음과 같이 쿠키를 굽고 읽고 삭제하는 함수를 만들었다.

function createCookie(name, value, days) {
	var newCookie = name + "=" + escape(value);
	if (days) {
		var expires = new Date();
		expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
		newCookie += "; expires=" + expires.toGMTString();
	}
	document.cookie = newCookie;
}
function readCookie(name) {
	var allCookies = document.cookie;
	var beginIndex = allCookies.indexOf(" " + name + "=");
	if (beginIndex === -1) {
		beginIndex = allCookies.indexOf(name + "=");
	}
	if (beginIndex === -1) {
		return null;
	} else {
		beginIndex = allCookies.indexOf("=", beginIndex) + 1;
		var endIndex = allCookies.indexOf(";", beginIndex);
		if (endIndex === -1) {
			endIndex = allCookies.length;
		}
		return unescape(allCookies.substring(beginIndex, endIndex));
	}
}
function deleteCookie(name) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

createCookie() 함수는 쿠키 이름=쿠키 값; 파기 날짜로 구성되는 쿠키를 만든다.
이때 설정하지 않은 도메인, 경로, 보안은 디폴트 값이 적용된다.

다음 예제는 쿠키 사용자 정의 함수를 이용해서 게시판 목록에서 게시글 갯수를 쿠키에 굽는다.

Test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>자바스크립트 쿠키 테스트</title>
<script>
window.onload = initPage;

function initPage() {
    var selectBox = document.getElementById("numPerPage");
    selectBox.onchange = setNumPerPage;
    var delNumPerPageBtn = document.getElementById("del-numPerPage-btn");
    delNumPerPageBtn.onclick = delNumPerPageCookie;
}
function setNumPerPage() {
    var selectBox = document.getElementById("numPerPage");
    var numPerPage = selectBox.value;
    createCookie('numPerPage', numPerPage, '100');
	showCookie();
}
function showCookie() {
    var numPerPage = readCookie("numPerPage");
    var div = document.getElementById('show-npp-div');
    if(numPerPage) {
      div.innerHTML = numPerPage;
    } else {
      div.innerHTML = '쿠키가 없습니다!';
    }
}
function delNumPerPageCookie() {
    deleteCookie("numPerPage");
    showCookie();
}
function createCookie(name, value, days) {
    var newCookie = name + "=" + escape(value);
    if (days) {
        var expires = new Date();
        expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
        newCookie += "; expires=" + expires.toGMTString();
    }
    document.cookie = newCookie;
}
function readCookie(name) {
    var allCookies = document.cookie;
    if (!allCookies) {
      return null;
    }
    var beginIndex = allCookies.indexOf(" " + name + "=");
    if (beginIndex === -1) {
        beginIndex = allCookies.indexOf(name + "=");
    }
    if (beginIndex === -1) {
        return null;
    } else {
        beginIndex = allCookies.indexOf("=", beginIndex) + 1;
        var endIndex = allCookies.indexOf(";", beginIndex);
        if (endIndex === -1) {
            endIndex = allCookies.length;
        }
        return unescape(allCookies.substring(beginIndex, endIndex));
    }
}
function deleteCookie(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
</script>
</head>
<body>
<div>
  <select id="numPerPage">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>
  <input type="button" id="del-numPerPage-btn" value="numPerPage 쿠키 삭제" />
</div>
<div id="show-npp-div"></div>
</body>
</html>

setNumPerPage() 함수는 100일 유효기간을 가진 numPerPage라는 쿠키를 굽는다.
서버 사이드에서는 다음 코드로 numPerPage 쿠키값을 얻을 수 있다.

int numPerPage = 10;
Cookie[] cookies = request.getCookies();
if (cookies != null) {
  for (int i = 0; i < cookies.length; i++) {
    String name = cookies[i].getName();
    if (name.equals("numPerPage")) {
      numPerPage = Integer.parseInt(cookies[i].getValue());
      break;
    }
  }
}
참고