ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [html5-예제] web storage 중 local storage
    컴터/html5 2010. 6. 16. 19:56

    예제 : http://whatdo.net/html5/example/#4

    브라우저에 저장하는 기능으로 아주 많은 양은 아니더라도 부족하지 않을 만큼을 저장할수 있다.
    정확히 얼마인지 기억이 가물가물...

    이와 같은 사용법으로 sessionStorage 가 있는데, 말그대로 브라우저를 닫았다 다시 열번 전자는 계속 유지하고 있는 반면 후자는 삭제된다.

    localStorage는 임의로 지울때까지 계속 보유하고 있는다.
    cookie 로 어렵게 하지 말고, webstorage를 이용하면 편할듯.

    ---------------------소스(스크립트짜기 귀찮아서..ㅡㅡ;; + jquery)--------------------------------------------
    var ls = window.localStorage;
        var storage={
            init:function(){
                if(!ls)
                    $("#error").fadeIn('slow');
            },

            save:function(){
                var d = new Date();
                var date = d.getFullYear()+ '-' + (parseInt(d.getMonth())+1) + '-'+ d.getDay();
                var cont = document.getElementById('content').innerHTML;
                var total = date+"|^|"+cont;

                ls.setItem(ls.length+1, total);

                this.list();                   
                //$("#output").append('<dl><dt>'    + date + '&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="storage.delOne(\''+(ls.length+1)+'\', event);" title="삭제">X</a></dt><dd>'+ cont+ '</dd><dl>').slideDown();
            },

            list:function(){
                if(ls.length<=0) return;
                $("#output").empty();
                $("legend span").text(' <총 : ' + ls.length+'>');

                for(var i=0; i<ls.length; i++){
                    var k = ls.key(i);
                    var v = ls.getItem(k); //key() return array index,
                   
                    if(v){
                        var tmp = v.split('|^|');
                        $("#output").append('<dl><dt>'    + tmp[0]+ '&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="storage.delOne(\''+k+'\', event);" title="삭제">X</a></dt><dd>'+ tmp[1]+ '</dd><dl>').slideDown();
                    }
                }
            },

            delOne:function(v,e){
                if(!v) return;
                ls.removeItem(v);   
                var ele = e.target||window.event.srcElement;
                $(ele.parentNode.parentNode).slideUp();       
                $("legend span").text(' <총 : ' + ls.length+'>');
            },

            delAll:function(){
                ls.clear();
                $("legend span").text(' <총 : 0>');
                $("#output").empty().slideUp();
            }

        };

    댓글 0

Designed by Tistory.