编辑本地存储中的项目

Question

我正尝试使用本地存储构建一个小型的Web应用程序。我可以添加和删除项目，但编辑项目的工作到某一点。项目编辑如你所料，但当你更新（刷新）页面时，我得到一个额外的项目和一个空项目。我想我几乎在那里，但无法解决这个问题。请参阅我的小提琴： http://jsfiddle.net/willwebdesigner/786Qu/2/

$(document).ready(function() { 

    var i = 0; 
    var menuButtons = " <a class='delete' href='#'>delete</a> <a class='edit' href='#'>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();        
    }); 

}); 

为寻找谢谢！

Answer 1

当编辑你被错误地追加前缀的话，你所要做的就是停止前面加上前缀

// Edit a task 
$(document).on("click", "#tasks li a.edit", function() { 

    var thisID = $(this).parent().attr("id"); // this is task-0 

    $(this).parent().html("<form><input class='taskEdit" + thisID + "' autofocus><input type='submit'></form>") 
    .submit(function() { 
     //localStorage.removeItem("task-" + thisID); // it becomes task-task-0 
     //localStorage.setItem("task-" + thisID, $(".taskEdit" + thisID).val()); 
     localStorage.setItem(thisID, $(".taskEdit" + thisID).val()); 
     $(this).html(localStorage.getItem(thisID) + menuButtons); 
     return false; 
    }); 
});