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

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

_{从技术上讲，我应该添加解释...}