0

我的小应用程序有问题，您可以在这里查看：http: //jsfiddle.net/47bV8/

我的问题是：我输入了一些注释，然后当我“清除所有”并重新输入注释时，控制台在刷新时返回我 lsReturn == null 。

我明白为什么，但看不到如何解决问题。

事实上，我的 'var i' 的值在全部清除后不是 0（它的值是我输入的最后一个音符，所以如果我输入了 5 个音符，则为 5），所以当我重新输入一个音符时，它是任务 6，所以刷新我的第一个循环失败了......

我试图在 localstorage.clear 之后设置 var i = 0 但它不起作用......

 jQuery(document).ready(function() {

  // Initial loading of tasks
  var i = 0;

    // clear All

  jQuery('.clear').on('click',function(e){

    e.preventDefault();
    jQuery('#tasks li').remove();
    localStorage.clear();
    jQuery(this).data('erase', true);

  });


  if(localStorage.length){  
     for( i = 0; i < localStorage.length; i++){ 

        var lsReturn = JSON.parse(localStorage.getItem('task-'+i));

        if (lsReturn == null){ // HERE IS THE PROBLEM
          var b = 0; //

        }else{
            jQuery("#tasks").append("<li id='task-"+i+"'>" + lsReturn.text  + " <a href='#'>Delete</a></li>");
           jQuery('#tasks li#task-'+i+'').css('background-color', lsReturn.color );

        }


     }

  }else{

    jQuery('header').after("<p class='error'>no messages</p>");

  }

  // ----------------- ADD A TASK ----------------------//

  jQuery("#tasks-form").submit(function() {

    if (jQuery("#task").val() != "" ) {

      jQuery('#task').attr('placeholder', "Enter a note")

      var text = jQuery("#task").val(); 
      var color = jQuery('#color').val(); 

      var allNotes = {}; 
      var note = {}; 

      note.text = text; 
      note.color = color;

      allNotes['task-'+i] = note; 

      var lsStore = JSON.stringify(allNotes['task-'+i ]);

      localStorage.setItem( "task-"+i, lsStore); 

      var lsStoreReturn = JSON.parse(localStorage.getItem("task-"+i, lsStore)); 

      jQuery("#tasks").append("<li id='task-"+i+"'>"+ lsStoreReturn.text +"<a href='#'>Delete</a></li>"); 
      jQuery('#tasks li#task-'+i+'').css('background-color', lsStoreReturn.color );
      jQuery("#task").val(""); 

      i++; 

    }else{

       jQuery('#task').attr('placeholder', "nothing in it !")

    }

    return false; 

  });

  // ----------------- REMOVE A TASK ----------------------//

  jQuery("#tasks li a").live("click", function(e) {

    e.preventDefault();

    localStorage.removeItem(jQuery(this).parent().attr("id"));

    jQuery(this).parent().remove();

    // PROBLEM solved : if I remove a task #2 in a list of  4 item for example, if i   refresh the list become 0, 1, 3, 4, 
    // so the locastorage loop doesn't find the item 2 

   for(i=0; i<localStorage.length; i++) { // SO I check my locastorage

      if(localStorage.getItem("task-"+i) == null) { // If the task 4 doesn't exist

        localStorage.setItem("task-"+i, localStorage.getItem('task-' + (i+1)));
        // I do : create  task-4 
        // and give him the value of task 5
        localStorage.removeItem('task-'+ (i+1) ); 
        // the i remove task 5
        // so the loop wiil not find task 5 and give him the value of task 6 etc..
      }
    }
  });

});​
4

1 回答 1

0

i通过以下方式重置您的变量

jQuery('.clear').on('click',function(e) {
  e.preventDefault();
  jQuery('#tasks li').remove();
  localStorage.clear();
  jQuery(this).data('erase', true);
  // Need to reset the index counter here.
  i = 0;
});

这是一个更新/工作的小提琴。

于 2012-07-24T18:38:35.077 回答