Javascript Web-使用LocalStorage API和jQuery删除所选列表项

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

现场演示，但可能不支持localStorage API：

只是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();
            });

var localStorage=window.localStorage；
//首先，将用户存储器中的所有当前注释作为列表项加载到页面中
var al1=“”；
对于（var p=0；p这确实是一项可以用不同方式完成的任务

“存储”项目是一种很好的做法，给它们一个唯一的标识符

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

let localStorage；
函数generateId（）{
设newId=Math.random（）.toString（36）.substr（2）；
while（storageGet（newId））{
newId=Math.random（）.toString（36）.substr（2）；
}
返回（newId）；
}
功能存储器插入（键，obj）{
setItem（key，obj）；
}
函数storageGet（键）{
返回（localStorage.getItem（key））；
}
函数storageRemove（键）{
localStorage.removietem（键）；
}
$（文档）.ready（（）=>{
localStorage=window.localStorage；
//全部加载。
for（设i=0；iX”+storageGet（key）+“”；
}
});
//单击X删除待办事项
$（“ul”）。在（“单击”，“跨距”，功能（事件）{
$（this.parent（）.fadeOut（500，function（））{
storageRemove（$（this.attr（“id”）.substr（5.toString（））；
$（this.remove（）；
});
event.stopPropagation（）；
});
//按enter键添加新列表项
$（“输入[type='text']”）。按键（函数（事件）{
if（event.which==13）{
//保持输入。
让todoText=$（this.val（）；
//生成一个唯一的ID。
设newId=generateId（）；
//重置输入。
$（此）.val（“”）；
//创建新元素。
$（“ul”）。追加（“
”+“X”+todoText+”
”；
//添加到存储中。
storageInsert（newId、todoText）；
}
});
$（“#切换表单”）。单击（函数（）{
$（“输入[type='text']”）。fadeToggle（）；
});

一个有效的例子：

希望它对您有所帮助！
localStorage不是数组，尽管它具有
length
属性。您应该迭代
Object.keys（localStorage）
，而您的标识符不应该基于索引。这样您就不会得到任何“漏洞”或在添加和删除项目时发生冲突：

const PREFIX = 'note-';

function appendItem(text, id) {
  $("ul").append("<li id='note-" + id + "'><span>X</span> " + text + "</li>");
}

// Initial page load: create the list
var keys = Object.keys(localStorage);
keys.forEach(key => {
  if (key.indexOf(PREFIX === 0) {
    appendItem(localStorage.getItem(key), key);
  }
});

// Create a new item (inside an event handler):
const key = PREFIX + Math.random();
const text = $(this).val();
localStorage.set(key, text);
appendItem(text, key);

// Remove item (inside a click handler):
const key = $(this).attr("id");
localStorage.removeItem(key);
$(this).remove();

const前缀='note-'；
函数appendItem（文本，id）{
$（“ul”）。追加（“
X”+text+”
”；
}
//初始页面加载：创建列表
var keys=Object.keys（localStorage）；
keys.forEach（key=>{
if（key.indexOf（前缀==0）{
appendItem（localStorage.getItem（key），key）；
}
});
//创建新项（在事件处理程序中）：
const key=PREFIX+Math.random（）；
常量文本=$（this.val（）；
localStorage.set（键，文本）；
附录项（文本、键）；
//删除项目（在单击处理程序中）：
const key=$（this.attr（“id”）；
localStorage.removietem（键）；
$（this.remove（）；
我已经在我自己的设备（Windows PC）上测试了这个问题，看起来根本没有删除笔记。从存储中删除项目是我的难题。我看到你所做的更新修复了这个问题。这意味着这是我一直在寻找的解决方案。非常感谢