使用本地存儲器保存自定義列表顯示中的更改

我試圖創建一個可自定義的列表，其中包含可以使用類隱藏的鏈接，如果您單擊按鈕。此外，該列表還有一個可排序的選項，您可以移動列表中的鏈接，將其保存到本地存儲。使用本地存儲器保存自定義列表顯示中的更改

問題是，我不知道如何在本地存儲中使用列表順序來保存類更改，如果您單擊每個li上的「添加/刪除」按鈕。

此外，如果任何人都可以幫助我改進代碼，我將不勝感激，我是一個localstorage的新手，只有在教程和文檔中進行了大量的閱讀。

這裏有一個工作示例：

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)); 
});

來源

2016-10-04 RogerHN

什麼是工作，什麼是不工作？你清楚地定義了你想要的，但是你沒有明確定義目前沒有工作的東西。 –

轉到codepen鏈接，單擊定製，現在如果單擊刪除，當您再次單擊定製時，該列表項將從列表中刪除，但不會像列表的順序一樣保存（如果您單擊正確的處理程序，您可以根據需要訂購列表，並且此訂單將保存在本地存儲中，但刪除的鏈接不會，我也想保存該信息。如果li項目具有該類別，我想保存當你關閉自定義選項時，隱藏或不隱藏） – RogerHN

請原諒我提出這樣一個明顯的問題*，但是我似乎無法弄清楚如何對li進行排序，這有什麼訣竅（我喜歡你的顏色順便說一句：D） –

你想是這樣的：

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

_{從技術上講，我應該添加說明...}

來源

2016-10-07 02:02:00

非常感謝您的幫助！ – RogerHN

@RogerHN：不客氣。 ;） –

使用本地存儲器保存自定義列表顯示中的更改

回答

相關問題