자바스크립트를 사용할 경우 로컬 저장소로 localStorage, sessionStorage 그리고 쿠키(cookie)를 생각할 수 있습니다. 오늘은 쿠키를 더 쉽고 간단하게 사용할 수 있는 library와 이를 사용하여 간단하게 쿠키 사용 예제를 알아보겠습니다.




# Cookie 쿠키를 사용하는 이유는?HTML5 이후 많은 분들이 여러 저장소가 사용되지만 Cookie도 많이 사용됩니다. 특히 저장될 데이터가 간단하면서도 만료가 필요한 경우가 더욱 그렇습니다. 쉽게 사용하고 만료될 값을 적용하기가 간단하기 때문이죠.


! 더 쉽게 사용하기 위한 라이브러리, CookieTimer아래의 CookieTimer좀 더 쉽고 빠르게 쿠키를 사용할 수 있도록 간단한 메소드를 가지는 작은 라이브러리입니다. 쿠키 사용이 자주 있을 때 손 쉽게 추가하고 사용하였으면 합니다.

@ cookie_timer.js
var CookieTimer = (function() {
    var _obj = function() {};

    /**
    Get a cookie
    */
    _obj.prototype.get = function(name) {
        var _cookieArray = document.cookie.split(';');
        var _result = null;
        _cookieArray.forEach(function(item) {
            var _cond = item.match(name + '=');
            if (_cond && _cond !== -1) _result = item.replace(name + '=', '').replace(/^\s/, '');
        });

        return _result;
    };


    /**
    Set a cookie
    @param name Cookie name
    @param value 
    @param expire Valid Day(s) from today
    */
    _obj.prototype.set = function(name, value, expire) {
        var _str;
        var _today = new Date();
        var _validDate = _today.setDate(_today.getDate() + expire);
        _str = name + "=" + encodeURI(value);
        _str += "; expires=" + _today.toGMTString();
        _str += "; path=/;";
        document.cookie = _str;

        console.log('Cookie "' + name + '" Saved');
    };

    return new _obj;
})();

먼저 위 라이브러리 파일을 저장하고 웹페이지에 불러와야 합니다.
<script src="cookie_timer.js"></script>

라이브러리 정보는 아래와 같습니다. 메소드는 값을 가져오거나 설정하는 두 개가 존재합니다.

- 전역변수 CookieTimer
- 메소드
  get()
  set()


! CookieTimer 사용 예제보기사용방법은 매우 간단합니다. 먼저 팝업 정보를 저장하는 예제로 아래와 같이 값을 저장해보겠습니다.

- 이름 : popup1
- 저장될 데이터 값 : 010101
- 만료일 : 3일 후

일단 쿠키를 저장하기 위해서 set()을 사용합니다. 스크립트에 아래 코드를 실행하도록 합니다.
CookieTimer('popup1', '010101', 3);

이제 저장이 완료되었습니다. 잘 저장되었는지 알려면 get()을 사용해 불러오면 될 것 입니다. 아래와 같이 사용합니다.
CookieTimer.get('popup1')

// '010101'을 출력

이제 모두 끝났습니다. 이처럼 쿠키를 쉽게 사용할 수 있는 유용한 라이브러리입니다.