웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 쿠키값 간단하게 저장 및 불러오기

Last Modified : 2020-05-31 / Created : 2018-11-05
5,913
View Count

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




# 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'을 출력

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

Previous

자바스크립트 switch 여러개의 멀티 케이스인 경우 방법

Previous

[HTML5] Canvas 태그에 투명도 opacity 적용하기