我正在尝试创建一个可自定义的列表,其中包含可以使用类隐藏的链接,如果您单击按钮.此列表还有一个可排序选项,您可以移动列表中的链接,这些链接将保存到localstorage.
问题是,如果单击每个li上的“添加/删除”按钮,我不知道如何使用localstorage中的列表顺序保存类更改.
此外,如果有人可以帮助我改进代码,我将不胜感激,我是localstorage的新手,并且只在教程和文档中阅读了很多内容.
这是一个有效的例子:
http://codepen.io/RogerHN/pen/EgbOzB
var list = document.getElementById('linklist'); var items = list.children; var itemsArr = []; for (var i in items) { itemsArr.push(items[i]); } // localStorage var ls = JSON.parse(localStorage.getItem('userlist') || '[]'); for (var j = 0; j < ls.length; j++) { for (i = 0; i < itemsArr.length; ++i) { if(itemsArr[i].dataset !== undefined){ if (ls[j] === itemsArr[i].dataset.id) { list.appendChild(itemsArr[i]); } } } } $('.list-block.sortable').on('sort',function () { var newIdsOrder = []; $(this).find('li').each(function(){ newIdsOrder.push($(this).attr('data-id')); }); // store in localStorage localStorage.setItem('userlist',JSON.stringify(newIdsOrder)); });
解决方法
你想要这样的东西:
var myApp = new Framework7({ swipePanel: 'left' }); // Export selectors engine var $$= Dom7; var mainView = myApp.addView('.view-main'); var list = document.getElementById('linklist'); var items = list.children; var itemsArr = []; for (var i in items) { itemsArr.push(items[i]); } // localStorage var ls = JSON.parse(localStorage.getItem('userlist') || '[]'); var classes = JSON.parse(localStorage.getItem('classes') || '["","",""]'); for (var j = 0; j < ls.length; j++) { for (i = 0; i < itemsArr.length; ++i) { if(itemsArr[i].dataset !== undefined){ if (ls[j] === itemsArr[i].dataset.id) { itemsArr[i].className = classes[i]; list.appendChild(itemsArr[i]); // handle [add/remove] thing if (classes[i] != "") { $(itemsArr[i]).find(".checky").removeClass("selected"); } } } } } $('.list-block.sortable').on('sort',saveInfo); $(".restore").click(function(e) { $(".confirm").show(); $(".shadow").show(); }); $(".no,.shadow").click(function(e) { $(".confirm").hide(); $(".shadow").hide(); }); $(".yes").click(function(e) { $(".confirm").hide(); }); $(".lbl").click(function(e) { $(".toggle-text").toggleClass("blue"); $(".restore").toggle(); $(".checky").toggle(); $("li.hidden").toggleClass("visible"); }); $('.checky').click(function() { if (!$(this).hasClass("selected")) { $(this).parent().removeClass("hidden").addClass("visible"); } else { $(this).parent().addClass("hidden visible"); } $(this).toggleClass("selected"); saveInfo(); }); function saveInfo() { var newUserList = []; var newClassList = []; $("#linklist").find('li').each( function() { newUserList.push($(this).attr('data-id')); if ($(this).hasClass("hidden")) { newClassList.push("hidden"); } else { newClassList.push(""); } }); // store in localStorage localStorage.setItem('userlist',JSON.stringify(newUserList)); localStorage.setItem('classes',JSON.stringify(newClassList)); console.log("saved."); } function reset() { console.log("Removing data from local storage."); localStorage.setItem('userlist','["1","2","3","4","5","6","7","8","9","10"]'); localStorage.setItem('classes','["",""]'); window.location.reload(true); };
从技术上讲,我应该添加解释……