Web - 使用 LocalStorage API 和 jQuery 删除选定的列表项

作为或多或少的概念验证，我想使用 LocalStorage API 将列表项保存到存储中。我想出的方法有点复杂且效率低下，但对于删除单个列表项用例来说，它效果很好。下面是它的大致工作原理。使用 localStorage.length 我使用 Javascript 为笔记提供一个“id”。这样，我可以使用 for 循环从第一个注释迭代到 localStorage.length，并在两次执行之间的页面加载期间将每个注释附加到 HTML 页面。此外，通过这个 id，我可以识别使用 jQuery 单击了哪个注释。问题出在删除笔记上。我可以删除用户单击的注释，但如果我不重新排序注释列表，就会在存储中创建所谓的“漏洞”。那么有什么想法吗？

现场演示在这里，但可能不支持 localStorage API：https://jsfiddle.net/2xke90sm/2/ https://jsfiddle.net/2xke90sm/2/

只是 JavaScript：

    var localStorage = window.localStorage; 

            //First load all of the current notes in the user's storage into the page as list items
            var al1 = "";

            for(var p=0;p<localStorage.length;p++) {
                var temp  = localStorage.getItem(p.toString());
                if(temp != null) {              //assures that something is being written from memory, problem is that if it does find some null value, it's skipping over it
                    $("ul").append("<li id='note-" + p + "'><span>X</span> " + temp + "</li>");
                    al1 += "Note #" + p + ": '" + temp + "' has been loaded from memory. \n";
                } 
            }
            console.log(al1);

            // Check Off Specific Todos By Clicking
            $("ul").on("click", "li", function(){
                $(this).toggleClass("completed");

                //test if $("#note-[index]").html() is the same as localStorge.getItem(index.toString()) are the same.
                var matchingStorage = localStorage.getItem($(this).attr("id").slice(5).toString());
                console.log("HTML: " + $(this).text() + "\n" + "Local Storage: " + "X " + matchingStorage);
            });

            //Click on X to delete Todo
            $("ul").on("click", "span", function(event){
                $(this).parent().fadeOut(500,function(){
                    if(localStorage.getItem($(this).attr("id").slice(5).toString())) {
                        localStorage.removeItem($(this).attr("id").slice(5).toString());        //remove from storage
                        $(this).remove();       //remove from the page
                        reorder();
                    } else {
                        alert("could not delete element from storage.");
                    }
                });
                event.stopPropagation();
            });

            //Add new list item on enter key press
            $("input[type='text']").keypress(function(event){
                if(event.which === 13){
                    //grabbing new todo text from input
                    var todoText = $(this).val();
                    $(this).val("");
                    //create a new li, add to ul and give it the index of the localStorage system as the id
                    $("ul").append("<li id='note-" + localStorage.length + "'>" +  "<span>X</span> " + todoText + "</li>");
                    localStorage.setItem(localStorage.length.toString(), todoText);     //write the todoTextGet with the index as the key
                }
            });

            $("#toggle-form").click(function(){
                $("input[type='text']").fadeToggle();
            });

这确实是一个可以通过不同方式完成的任务，

“存储”项目并为它们提供唯一标识符是一个很好的做法。

let localStorage;

function generateId() {
        let newId = Math.random().toString(36).substr(2);

        while (storageGet(newId)) {
            newId = Math.random().toString(36).substr(2);
        }
        return (newId);
}

function storageInsert(key, obj) {
    localStorage.setItem(key, obj);
}

function storageGet(key) {
    return (localStorage.getItem(key));
}

function storageRemove(key) {
    localStorage.removeItem(key);
}

$(document).ready(() => {
    localStorage = window.localStorage; 

    //Load all.
    for (let i = 0; i < localStorage.length; i++){
        let key = localStorage.key(i);
        $("ul").append("<li id='note-" + key +"'> <span>X</span> " + storageGet(key) + "</li>");
    }
});

//Click on X to delete Todo
$("ul").on("click", "span", function(event){
    $(this).parent().fadeOut(500,function(){
            storageRemove($(this).attr("id").substr(5).toString());
            $(this).remove();
    });
    event.stopPropagation();
});

//Add new list item on enter key press
$("input[type='text']").keypress(function(event){
    if(event.which === 13){
        //Hold input.
        let todoText = $(this).val();

        //Generate an unique ID.
        let newId = generateId();

        //Reset Input.
        $(this).val("");

        //Create new element.
        $("ul").append("<li id='note_" + newId + "'>" +  "<span>X</span> " + todoText + "</li>");

        //Add to storage.
        storageInsert(newId, todoText);
    }
});

$("#toggle-form").click(function(){
    $("input[type='text']").fadeToggle();
});

一个工作示例：https://jsfiddle.net/2xke90sm/38/ https://jsfiddle.net/2xke90sm/38/

希望对您有帮助！