Preoknentor
New Member
I am trying to build a little web app using local storage. I can add and delete items but editing items works to a certain point. Items edit as you would expect but when you update(refresh) the page I get an extra item and a null item. I think I'm almost there but can't get my head around this issue. Please see my fiddle:http://jsfiddle.net/willwebdesigner/786Qu/2/\[code\] $(document).ready(function() { var i = 0; var menuButtons = " <a class='delete' href='http://stackoverflow.com/questions/15611520/#'>delete</a> <a class='edit' href='http://stackoverflow.com/questions/15611520/#'>edit</a></li>"; // Initial loading of tasks for( i = 0; i < localStorage.length; i++) { $("#tasks").append("<li id='task-" + i +"'>" + localStorage.getItem('task-' + i) + menuButtons); } // Add a task $("#tasks-form").submit(function() { if ( $("#task").val() != "" ) { localStorage.setItem( "task-" + i, $("#task").val()); $("#tasks").append("<li id='task-" +i +"'>"+localStorage.getItem("task-" + i) + menuButtons); $("#task-" + i).css('display', 'none'); $("#task-" + i).slideDown(); $("#task").val(""); i++; } return false; }); // Remove a task $(document).on("click", "#tasks li a.delete", function() { localStorage.removeItem($(this).parent().attr("id")); $(this).parent().slideUp('slow', function() { $(this).remove(); }); // This part resets all the IDs for( i = 0; i < localStorage.length; i++) { if( !localStorage.getItem("task-"+ i)) { localStorage.setItem("task-"+ i, localStorage.getItem('task-' + (i + 1) )); // Moves the id up a level localStorage.removeItem("task-"+ (i + 1) ); // Removes the id 1 up from the deleted item } } }); // Edit a task $(document).on("click", "#tasks li a.edit", function() { var thisID = $(this).parent().attr("id"); $(this).parent().html("<form><input class='taskEdit" + thisID + "' autofocus><input type='submit'></form>") .submit(function() { localStorage.removeItem("task-" + thisID); localStorage.setItem("task-" + thisID, $(".taskEdit" + thisID ).val()); $(this).html(localStorage.getItem("task-" + thisID) + menuButtons); return false; }); }); // Reset all $("#reset").click(function() { localStorage.clear(); });});\[/code\]Thanks for looking!