使用本地存储器保存自定义列表显示中的更改

Question

我试图创建一个可自定义的列表，其中包含可以使用类隐藏的链接，如果您单击按钮。此外，该列表还有一个可排序的选项，您可以移动列表中的链接，将其保存到本地存储。

问题是，我不知道如何在本地存储中使用列表顺序来保存类更改，如果您单击每个li上的“添加/删除”按钮。

此外，如果任何人都可以帮助我改进代码，我将不胜感激，我是一个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)); 
}); 

Answer 1

你想是这样的：

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

---

Codepen

_{从技术上讲，我应该添加说明...}