localStorage将元素添加到列表中

时间:2013-11-21 07:33:05

标签: javascript jquery json local-storage

我正在创建一个动态列表,使用localstorage保存json数组数据,我遇到了问题。

在萤火虫中它显示了这个错误:

SyntaxError: JSON.parse: unexpected keyword  
var cli=JSON.parse(table[i]);

这是我的jquery代码:

jQuery(document).ready(function() {
var count = 0,
table = localStorage.getItem('table');
table = JSON.parse(table);
if(table == null) {
    table = []; 
}

jQuery('.add_rem').on('click',function(e) {
    e.preventDefault();
    if(jQuery(this).hasClass('remove')) {
      count -= 1;
    }else {
      count += 1;
    }     

      if(jQuery(this).hasClass('remove')){
          if(count == 0) {
            jQuery('.list li.empty').show();
            localStorage.clear();
          }

              jQuery("#"+localStorage.getItem('id')).removeClass('remove');
              jQuery('.panel2 a span').text('('+ localStorage.getItem('count') +')');
              jQuery(localStorage.getItem(jQuery(this).attr('id'))).remove()
              localStorage.removeItem('id');

      } else {
          jQuery('.list li.empty').hide();

          var clipelements = JSON.stringify({
              'id': jQuery(this).closest('tr').attr('id'),
              'elementlink': jQuery(this).closest('tr').find('.link').attr('href'),
              'photo': jQuery(this).closest('tr').find('.photo').attr('src'),
              'name': jQuery(this).closest('tr').find('.name').text()
          })

          table.push(clipelements);
          localStorage.setItem('table', JSON.stringify(clipelements));
          localStorage.setItem('count', count);



        for(var i in table){
            var cli = JSON.parse(table[i]);
            jQuery("#"+cli.id ).find(".add_rem").addClass('remove');    
        jQuery('#hp-content .wrapper .list').append('<li id="'+cli.id+'"><a href="'+ cli.elementlink+'"><img src="'+ cli.photo +'"/><br />'+ cli.name +'</a></li>');
        }


        jQuery('.panel2 a span').text('('+ localStorage.getItem('count') +')');
      }
})  
if(localStorage.count > 0){
        jQuery('#hp-content .wrapper .list li.empty').hide();
        for(var i in table){
            var cli = JSON.parse(table[i]);
            jQuery("#"+cli.id ).find(".add_rem").addClass('remove');    
            jQuery('#hp-content .wrapper .list').append('<li id="'+cli.id+'"><a href="'+ cli.elementlink+'"><img src="'+ cli.photo +'"/><br />'+ cli.name +'</a></li>');
        }
if(!localStorage.getItem('count')) {    

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

}
if(!localStorage.getItem('count')) {    

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

这是JSON.parse之前的字符串:

"{\"id\":\"13\",\"elementlink\":\"pl/13/zadlo-sciezne/\",\"photo\":\"images/pl/brak.gif\",\"name\":\"żądło ścięźne / kk\"}"

并在JSON.parse之后

{"id":"13","elementlink":"pl/13/zadlo-sciezne/","photo":"images/pl/brak.gif","name":"żądło ścięźne / kk"}

我希望这个脚本在JSON数组中存储元素,并将它们显示在未排序的列表中,但我不知道我做错了什么。我不是jQuery程序员所以我认为这是我最大的问题。

1 个答案:

答案 0 :(得分:0)

你打电话给JSON.parse太多次了 - 特别是那句话:

var cli = JSON.parse(table[i]);

错了 - 它应该只是var cli = table[i]

实际上,您正试图通过JSON解析器传回已经解析过的字符串。