localStorage将元素添加到列表中

localStorage add element to list

本文关键字：列表 添加 元素 localStorage      更新时间：2023-09-26

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

在firebug中，它显示了这个错误：

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程序员，所以我认为这是我最大的问题。

您调用JSON.parse的次数太多了，特别是说：

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

是错误的——它可能只是var cli = table[i]。

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

相关文章：