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

Save change in custom list display using local storage

本文关键字：自定义 列表显示 保存更改 存储      更新时间：2023-09-26

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

问题是，我不知道如何保存类的变化与列表顺序在本地存储，如果你点击"添加/删除"按钮在每个li。

另外，如果有人能帮助我改进代码，我会很感激，我是一个新手与本地存储，只有管理这与大量的阅读教程和文档。

下面是一个工作示例:

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

技术上讲，我应该加上解释…

相关文章：