jquery JSON数组作为localStorage项

时间:2013-11-25 00:55:33

标签: javascript jquery json local-storage

我的代码变化不大,部分有效:)

    var db = {
        hotels: JSON.parse(localStorage.getItem('table') || "[]"),

        get objects() {return this.hotels},
        set objects(obj) {
            obj = this.hotels;
            localStorage.setItem('table', JSON.stringify(obj))
        }
    }



jQuery(function(){

    var count = localStorage.getItem('count');
    if(!count) {
     count = 0;
    }


    function Add(item){
        var client = {
            ID    : jQuery(item).find("#txtID").val(),
            Name  : jQuery(item).find("#txtName").val(),
            Photo : jQuery(item).find("#txtPhone").val(),
            Link : jQuery(item).find("#txtEmail").val()
        };
        db.objects = db.objects.push(client);
        count = count+1;
        localStorage.setItem('count',count);

        jQuery('.panel2 a span').text('('+ localStorage.getItem('count') +')');

        jQuery(item).find('.add_rem').hide();
        jQuery(item).find('.remove').show();
        jQuery("#tblList .empty").hide();
        jQuery("#tblList").find('li:gt(0)').remove();

        jQuery.each(db.objects,function(i,element) {
            jQuery("#tblList").append("<li class='added"+db.objects[i].ID+"'>"+
                                         "<img src='../../images/general/delete.gif' alt='Delete"+i+"' class='delete'/>" +
                                         "<a href='"+db.objects[i].Link+"' title='"+db.objects[i].Name+"'>"+
                                         "  <img src='"+db.objects[i].Photo+"' alt='"+db.objects[i].Name+"'>" + 
                                         "  <span>"+db.objects[i].Name+"</span>" + 
                                         "  </a>" + 
                                      "</li>");
        })
        return true;
    }

    function Delete(item){
                jQuery(item).prev('.add_rem').show();
                jQuery(item).find('.remove').hide();
                jQuery(item).find('.remove').removeAttr('alt');

    }

    function List(){
        if(count > 0) {
            jQuery("#tblList .empty").hide();
            jQuery('.panel2 a span').text('('+ localStorage.getItem('count') +')');
        }
        for(var i= 0; i<= count; i++) {
         var cli = JSON.parse(db.hotels);
            if(cli[i] != null){
                jQuery("#"+cli[i].ID).find('.add_rem').hide();
                jQuery("#"+cli[i].ID).find('.remove').show();
                jQuery("#"+cli[i].ID).find('.remove').attr('alt','Delete'+i);
                jQuery("#tblList").append("<li class='added"+cli[i].ID+"'>"+
                                         "<img src='../../images/general/delete.gif' alt='Delete"+i+"' class='delete'/>" +
                                         "<a href='"+cli[i].Link+"' title='"+cli[i].Name+"'>"+
                                         "  <img src='"+cli[i].Photo+"' alt='"+cli[i].Name+"'>" + 
                                         "  <span>"+cli[i].Name+"</span>" + 
                                         "  </a>" + 
                                      "</li>");
            }
        }
    }

    jQuery("#frmCadastre").bind('submit',function(e){   
       e.preventDefault()   
            return Add(this);
    });
        List();

    jQuery(".remove, .delete").bind("click", function(e){
        e.preventDefault();
        Delete(this);
        List();
    });

})

现在我的问题是如何在页面刷新后将元素推送到数组,这位于function Add()

数组看起来像这样

"["{"ID":"1","Name":"test","photo":"/link/to/photo.jpg"}"]"

如果我在页面刷新之前添加另一个元素,那就很好用了

"["{"ID":"0","Name":"test0","photo":"/link/to/photo0.jpg"}","{"ID":"1","Name":"test1","photo":"/link/to/photo1.jpg"}"]"

但是如果我重新加载页面并尝试添加一个元素Firebug正在抛出:

 `TypeError: db.objects.push is not a function  

 db.objects = db.objects.push(client);`

0 个答案:

没有答案