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

2023年6月21日 187次阅读

我正在尝试创建一个可自定义的列表,其中包含可以使用类隐藏的链接,如果您单击按钮.此列表还有一个可排序选项,您可以移动列表中的链接,这些链接将保存到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);
};

Codepen

从技术上讲,我应该添加解释……

点赞