[html5-예제] web storage 중 local storage

예제 : 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();
        }

    };