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

或多或少，概念validation我想使用LocalStorage API将列表项保存到存储中。 我提出的方法有点复杂和低效，但直到删除单个列表项用例，它运行良好。 这是它大致如何工作的方式。 使用localStorage.length我使用Javascript给笔记一个“id”。 这样我就可以使用for循环从第一个音符迭代到localStorage.length，并在执行之间的页面加载期间将每个音符附加到HTML页面。 此外，有了这个id，我可以识别用jQuery点击了哪个音符。 问题在于删除笔记。 我可以删除用户点击的注释，但是如果我不重新排序在存储中创建他们称之为“洞”的注释列表。 那么任何想法？

现场演示，但可能不支持localStorage API： 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("
X " + temp + "
"); 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("
" + "X " + todoText + "
"); localStorage.setItem(localStorage.length.toString(), todoText); //write the todoTextGet with the index as the key } }); $("#toggle-form").click(function(){ $("input[type='text']").fadeToggle(); }); 

Answer 1

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

“存储”项目为其提供唯一标识符是一种很好的做法。

 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("
 X " + storageGet(key) + "
"); } }); //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("
" + "X " + todoText + "
"); //Add to storage. storageInsert(newId, todoText); } }); $("#toggle-form").click(function(){ $("input[type='text']").fadeToggle(); }); 

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

希望它能帮到你！

Answer 2

localStorage不是一个数组，尽管它有一个length属性。 您应该迭代Object.keys(localStorage)而不是使用length ，并且您的标识符不应该基于索引。 这样，添加和删除项目时不会出现任何“漏洞”或冲突：

 const PREFIX = 'note-'; function appendItem(text, id) { $("ul").append("
X " + text + "
"); } // 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();