'Web Storage'에 해당되는 글 1건

  1. 2011.12.01 Cookie 랑 Web Storage 맛보기.

Cookie 랑 Web Storage 맛보기.

ITWeb/개발일반 2011.12.01 15:08
Client 에서 정보를 저장하고 사용하기 위해서 전통적으로 cookie 를 많이 사용했었죠.
HTML5 이 대두 되면서 더 좋은 기술들이 나오고 있습니다.
그래서 cookie 랑 localStorage 맛보기 들어 갑니다.

그냥 단순히 작성한 코드니까 확장이나 응용, 활용은 각자의 몫입니다. ^^

[Cookie]
- 이전 글 참고 부탁 하며,
http://jjeong.tistory.com/528

var COOKIE = {

    set : function(k, v, e, t) {

        var expireDate = new Date();

        var cookieValue;


        if (t == '') {

            t = CONSTANT.COOKIE_EXPIRE_DAY;

        }


        switch (t) {

            case CONSTANT.COOKIE_EXPIRE_DAY:

                expireDate.setDate(expireDate.getDate() + e);

                break;

            case CONSTANT.COOKIE_EXPIRE_DAY:

                expireDate.setTime(expireDate.getTime() + (e * 60 * 60 * 1000));

                break;

            default:

                expireDate.setDate(expireDate.getDate() + e);

        }


        if (e) {

            cookieValue = escape(v) + '; expires=' + expireDate.toGMTString();

        } else {

            cookieValue = escape(v);

        }


        document.cookie = k + '=' + cookieValue + '; path=/';

    },


    get : function(k) {

        var cookies = document.cookie.split(';');

        var i, key, val, size, idx;


        size = cookies.length;


        for (i = 0; i < size; i++) {

            idx = cookies[i].indexOf('=');

            key = cookies[i].substr(0, idx);

            val = cookies[i].substr(idx + 1);

            key = key.replace(/^\s+|\s+$/g, "");


            if (key == k) {

                return unescape(val);

            }

        }


        return false;

    },


    del : function(k) {

        this.set(k, '', -1);

    }

}


[localStorage]

var LOCALSTORAGE = {

    set : function (k, v) {

        //localStorage[k] = v;

        localStorage.setItem(k,v);

    },

    

    get : function (k) {

        //return localStorage[k];

        return localStorage.getItem(k);

    },

    

    del : function (k) {

        localStorage.removeItem(k);

    },

    

    clear : function () {

        localStorage.clear();

    }

}


[간단설명]
- 둘 다 client 단에서 정보를 read/write 하기 위해서 만들어 졌습니다.
- Code 크기만 보더라도 localStorage 가 훨씬 짧죠.. 그리고 더 직관적이고 사용하기 아주 쉽습니다.
- 각 코드에는 exception 처리가 포함되어 있지 않습니다. biz 나 service layer 에서 처리를 하시면 되겠죠.
- Web Storage 도 localStorage 와 sessionStorage 가 있습니다.
- Cookie 랑 비교하면 persistence cookie == localStorage, temporary cookie == sessionStorage 정도 되겠내요.
- 성능적인 부분에서도 localStorage 가 월등 합니다.

[참고사이트]
http://dev.w3.org/html5/webstorage/
http://www.w3schools.com/html5/html5_webstorage.asp
https://developer.mozilla.org/en/DOM/Storage

[W3C Web Storage Interface]
interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 : Comment 0

티스토리 툴바