JavaScript - 쿠키를 사용해보자!

기본 문법!

document.cookie = "쿠키이름=쿠키값" // Ex) document. cookie = "test=abcde";

 

cookie를 설정하는 setCookie() 함수 만들기!

function setCookie(cookie_name, value, days) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + days);
    // 설정 일수만큼 현재시간에 만료값으로 지정
    var cookie_value = escape(value) + ((days == null) ? '' : ';
    expires=' + exdate.toUTCString());
    document.cookie = cookie_name + '=' + cookie_value;
}

위와 같이 쿠키를 저장하는 함수를 만들어 사용 할 수 있다!

 

3일 후에 만료되는 myHobby 이름으로 game이라는 값을 저장한다면?

이렇게 사용 할 수 있지!

setCookie('myHobby', 'game', '3');

차례대로 함수 이름, 저장할 값, 만료시간 값을 뜻하고

만료시간은 현재시간의 밀리세컨드인 timestamp 값을 사용한다!

 

만약 3일 후가 아닌 분 단위로 설정이 필요한 경우엔

setCookie() 함수를 변경!

setCookie: (cookie_name, value, miuntes) => {
    const exdate = new Date();
    exdate.setMinutes(exdate.getMinutes() + miuntes);
    const cookie_value = escape(value) + ((miuntes == null) ? '' : ';
    expires=' + exdate.toUTCString());
    document.cookie = cookie_name + '=' + cookie_value;
},

 

cookie가 잘 저장 되었는지 확인 하기 위해서는

document 객체의 cookie에 저장되어 있기 때문에

이렇게 확인 할 수 있다!

document.cookie; // myHobby=game가 출력되며 ;를 구분자로 저장됨

 

그렇다면 값을 가져오는 방법은??

 

getCookie() 함수를 만들자~~

function getCookie(cookie_name) {
    var x, y;
    var val = document.cookie.split(';');
    for (var i = 0; i < val.length; i++) {
        x = val[i].substr(0, val[i].indexOf('='));
        y = val[i].substr(val[i].indexOf('=') + 1);
        x = x.replace(/^\s+|\s+$/g, '');
        // 앞과 뒤의 공백 제거하기
        if (x == cookie_name) {
            return unescape(y);
            // unescape로 디코딩 후 값 리턴
        }
    }
}

 

 

---

 

 

만약, 저장할 값이 하나가 아닌 여러개인 경우!

addCookie() 함수 고고!

function addCookie(id) {
    var items = getCookie('productItems');
    // 이미 저장된 값을 쿠키에서 가져오기
    var maxItemNum = 5;
    // 최대 저장 가능한 아이템개수
    var expire = 7;
    // 쿠키값을 저장할 기간
    if (items) {
    	var itemArray = items.split(',');
        if (itemArray.indexOf(id) != -1) {
        	// 이미 존재하는 경우 종료
            console.log('Already exists.');
        } else {
        	// 새로운 값 저장 및 최대 개수 유지하기
            itemArray.unshift(id);
            if (itemArray.length > maxItemNum ) itemArray.length = 5;
            items = itemArray.join(',');
            setCookie('productItems', items, expire);
        }
    } else {
    	// 신규 id값 저장하기
        setCookie('productItems', id, expire);
    }
}

 

addCookie() 함수를 사용해서 상품 id 값을 저장할 수 있게 됐다!

 

만약 새로운 id 값 111을 저장한다면 이렇게 사용!

addCookie('111');

 

저장된 값은 이렇게 확인!

addCookie();

 

새로운 값 222를 추가해보자!

addCookie('222')

 

똑같은 값이 있다면, 이미 있다고 출력이 되고 아무런 일도 발생하지 않는다!

addCookie('222') // Already exists

 

 

---

※ 함수화해서 사용
setCookie(), getCookie()

function setCookie(name, value, expiredays){
     var todayDate = new Date();
     todayDate.setDate (todayDate.getDate() + expiredays);
     document.cookie = name + "=" + escape(value) + ";
     path=/;
     expires=" + todayDate.toGMTString() + ";";
}

 

 

function getCookie(name){
    var nameOfCookie = name + "=";
    var x = 0;
    while (x <= document.cookie.length){
    	var y = (x + nameOfCookie.length);
        if (document.cookie.substring(x, y) == nameOfCookie) {
        	if ((endOfCookie = document.cookie.indexOf(";", y)) == -1) {
            	endOfCookie = document.cookie.length;
            }
        	return unescape (document.cookie.substring(y, endOfCookie));
    	}
        x = document.cookie.indexOf (" ", x) + 1; if (x == 0) break;
    }
    return "";
}