locaStorage and javascript loop

Question

I have a problem with my little app, You can see it here : http://jsfiddle.net/47bV8/

My problem is : I enter some notes then when I "clear All", and i re-enter a note, the console returns me lsReturn == null on the refresh .

I understand Why but can't see how to solve the problem.

In fact the value of my 'var i' is not 0 after clear all (it's value is the last note i've entered so 5 if i've entered 5 notes), so when i re enter a note it's task-6, so on the refresh my first loop fails...

I tried to set var i = 0 after the localstorage.clear but it doesn't worK...

 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..
      }
    }
  });

});

You should not loop from 0 to localstorage.length, there might be other values than your tasks as well. See [this question](http://stackoverflow.com/questions/3138564/looping-through-localstorage-in-html5-and-javascript) for how to do it properly. — Bergi, Jul 24 '12 at 18:40

score 0 · Accepted Answer · answered Jul 24 '12 at 18:38

0

Reset your i variable in the following way

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;
});

Here is an updated/working fiddle.

answered Jul 24 '12 at 18:38

Brant Olsen

5,628
5
36
53

thanks a lot, I've tried this before and i don't know why but it wasn't working... but yes the problem is solved, now :-/ Thansk ! – user1521149 Jul 24 '12 at 21:09

locaStorage and javascript loop

1 Answers1