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

编辑本地存储中的项目

1 个答案: