Save change in custom list display using local storage
<p>I am trying to create a customizable list with links that can be hidden using a class if you click in a button. Also the list have a sortable option that you can move the links on the list, which saves to localstorage.</p>

<p>The problem is that I don't know how to save the class change with the list order in the localstorage if you click the "add/remove" button on each li.</p>

<p>Also, if anyone can help me improve the code I will be grateful, I am a newbie with localstorage and only managed this with a lot of reading in tutorials and documentation.</p>

<p>Here's a working example:</p>

<p><a href="http://codepen.io/RogerHN/pen/EgbOzB" rel="nofollow">http://codepen.io/RogerHN/pen/EgbOzB</a></p>

<pre><code>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 &lt; ls.length; j++) {
    for (i = 0; i &lt; 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));
});
</code></pre>