[javascript] 자바스크립트 쿠키 저장, 조회, 삭제 배우기 (Cookie)

 

 

 

안녕하세요.

오늘은 javascript document의 cookie를 사용하여 간단하게 데이터를 저장, 조회, 삭제하는 방법을 포스팅해보려고 합니다.

cookie는 보통 웹서버에서 http 응답 헤더에 의해 브라우저(클라이언트)에 간단하게 데이터를 저장하는 기능입니다.

브라우저에 데이터를 저장하기 때문에 보안에 취약하지만 보안에 문제 되지 않는 데이터를 저장할 때에는 아주 유용하게 사용할 수 있습니다.

 

그럼 바로 예제로 확인해 보겠습니다.

---

1. setCookie, 쿠키 저장

/**
 * cookie 생성
 */
function setCookie (name, value, expire) {
	
	// 날짜 expire 설정
	const date = new Date();
	date.setTime(date.getTime() + expire * 24 * 60 * 60 * 1000);
	// 쿠키 데이터 저장
	document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
}

간단하게 쿠키를 생성하는 함수를 만들었습니다.

파라미터 값으로는

- name : 저장 대상이 되는 name 정보

- value : 저장 대상이 되는 value 정보

- expire : 저장 기간 설정 (시간 기준), expire 정보는 일, 시, 분, 초 등 원하는 expire 정보로 받고 함수 내에서 시간 설정 부분을 수정하여 사용 가능

 

쿠키 저장을 위해 name, value, expires, path 정보를 문자열로 세팅하고 document.cookie에 저장을 합니다.

ex) name=value;expires=date;path=/;

예시를 보게 되면 문자열의 name, expires, path 정보는 ';' 기준으로 구분을 해주고 있습니다.

 

---

2. getCookie, 쿠키 조회

/**
 * cookie 조회
 */
function getCookie (name) {
	// 쿠키 데이터 불러오기
	const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
	return value ? value[2] : null;
}

위의 소스 코드는 저장한 쿠키 정보를 조회하는 함수입니다.

document.cookie.match를 이용해 조회할 name값을 입력하면 아래와 같이 value 정보를 가져오게 됩니다.

['test=133', '', '133', '', index: 0, input: 'test=133', groups: undefined]

위의 배열값에서 필요한 정보는 2번째 인덱스 값이 필요하므로 value[2]으로 return을 해줬습니다.

 

---

3. getCookie, 쿠키 삭제

/**
 * cookie 삭제
 */
function deleteCookie (name) {
	// 날짜 expire 설정
	const date = new Date();
	date.setDate(date.getDate() - 1);
	// 쿠키 데이터 삭제
	document.cookie = name + '=; expires=' + date.getUTCString() + ';path=/';
}

마지막으로 쿠키를 삭제해 주는 함수입니다.

조회하는 함수와 마찬가지로 name 정보만 인자값으로 받고, expire 값은 하루 전 날짜로 세팅을 해줬습니다.

cookie를 삭제하는 조건은 expire값이 만료가 되면 자동으로 삭제가 됩니다. 강제로 삭제가 필요한 경우는 위의 소스 코드처럼 name값을 비워주고 날짜값을 만료시켜서 저장을 합니다.

 

* name=;expires=Tue, 03 Jan 2023 12:29:32 GMT;path=/

name 초기화	name=
expire 초기화	expires=Tue, 03 Jan 2023 12:29:32 GMT
path 초기화	path=/

위의 테이블 표처럼 각각의 정보값을 초기화하여 저장을 하게 됩니다. 여기서 path 정보는 저장했던 path정보와 동일하게 세팅을 해줘야 삭제가 됩니다.

 

---

4. 저장, 조회, 삭제

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {
    
    /**
     * cookie 저장 정보
     */
    const name	 	= 'test';
    const value 	= 'test 123';
    const expire 	= 1;
    
    /**
     * cookie 신규 저장
     */
    setCookie(name, value, expire);
    
    /**
     * cookie 조회
     */
    let getValue = getCookie(name);
    
    console.log('* cookie 조회 : ' + getValue);
    
    /**
     * cookie 삭제
     */
    deleteCookie(name);
    
    /**
     * cookie 삭제 확인 조회
     */
    getValue = getCookie(name);
    
    console.log('* cookie 삭제 확인 : ' + getValue);
});

/**
 * cookie 생성
 */
function setCookie (key, value, expire) {
    
    // 날짜 expire 설정
    const date = new Date();
    date.setTime(date.getTime() + expire * 24 * 60 * 60 * 1000);
    // 쿠키 데이터 저장
    document.cookie = key + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
}

/**
 * cookie 조회
 */
function getCookie (name) {
    // 쿠키 데이터 불러오기
    const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value ? value[2] : null;
}

/**
 * cookie 삭제
 */
function deleteCookie (name) {
    // 날짜 expire 설정
    const date = new Date();
    date.setDate(date.getDate() - 1);
    // 쿠키 데이터 삭제
    document.cookie = name + '=; expires=' + date.toUTCString() + ';path=/';
}
</script>

cookie의 등록, 수정, 삭제를 모두 포함하여 테스트를 진행한 전체 소스 코드 입니다.

 

* Cookie 갱신

등록한 cookie 정보에서 갱신이 필요할 때에는 setCookie 함수에 다시 저장하면 저장된 데이터가 갱신이 됩니다.

 

* 실행 결과 화면

위의 소스 코드 실행 결과는 잘 나왔습니다.

 

 

반응형

---

마무리

오늘은 javascript의 기본 기능인 document.cookie를 정리해 봤습니다. 정말 간단하면서 중요한 내용입니다! cookie를 테스트하고 개발할 때에는 웹서버를 띄워서 진행을 해야 하므로 간단한 서버라도 띄워서 진행을 하시면 됩니다.

다음에는 cookie와 같이 정보를 임시로 저장할 때 많이 사용하는 session에 대해 포스팅을 하도록 하겠습니다.

 

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

 

---

* document.cookie link

https://developer.mozilla.org/ko/docs/Web/API/Document/cookie

Document.cookie - Web API | MDN

 

 

---