Saving changes to user list display using local storage

Question

I am trying to create a custom list with links that can be hidden using the class if you click the button. In addition, the list has sorting that allows you to move links in the list that are stored in localstorage.

The problem is that I don’t know how to save the class change with the list order in localstorage if you click the add / remove button on each one.

In addition, if someone can help me improve the code, I will be grateful, I am new to localstorage and only managed this, read a lot in textbooks and documentation.

Here is a working example:

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

_...