使用本地存儲來記住css顯示值

我有一個建立在html/javascript中的清單，您可以通過單擊箭頭來顯示/隱藏清單的每個部分，但我想使用本地存儲來記住每個項目是否顯示或上次使用應用程序時隱藏，然後按照上次使用該應用程序的方式加載頁面，因此，如果所有上次顯示的用戶使用該應用程序的清單項目都是這樣，那麼我希望在下次使用該應用程序時顯示所有清單項目應用程序。但我不知道如何讓JavaScript/localstorage記住CSS顯示值。也許這不是解決這個問題的最好方法。任何想法或提示將不勝感激。使用本地存儲來記住css顯示值

來源

2015-07-20 Brandon

你卡在哪裏？你已經有localStorage了嗎？你有沒有讀過[this]（https://developer.mozilla.org/en/docs/Web/API/Window/localStorage）？ –

順便說一句，這種類型的問題，「解決這個問題的最好方法」，對於這個問答網站來說並不是一個好的選擇。它傾向於使用單數答案的問題，而不是討論關於localStorage與其他技術（如cookie）或存儲數據服務器端的優缺點的討論。 –

不要用它來存儲css值，只是用它來存儲複選框的最後一個狀態。因此，如果他們選中該複選框，請在localstorage中爲該複選框選中一個值。然後當頁面加載時，從localstorage獲得所有複選框的狀態，並且可以將它們全部切換到它們以前的狀態。複選框的狀態會驅動應用於它們的css類。

來源

2015-07-20 13:18:42 kanzelm3

要使用本地存儲，您需要記住字符串存儲。你可以使用JSON對象，字符串化來存儲數據。

使用複選框的id屬性和它的顯示風格作爲值：

首先獲得由ID的複選框（可以在一個循環中完成）：

var checkbox =document.getElementById('someCheckbox');

然後，你需要得到當前存儲的字符串：

var myStorageData = localStorage.getItem('mydata');

，並檢查它是否存在，如果是這樣，它解析爲一個對象，否則讓一個新的對象：

if(myStorageData) { 
    myStorageData = JSON.parse(myStorageData); 
} 
else { 
    myStorageData = {}; 
}

最後，設置對象的屬性的基礎上，複選框的ID和設置使用新值存儲：

myStorageData[checkbox.id] = checkbox.style.display; 

localStorage.setItem('myData',JSON.stringify(myStorageData));

要改變你的複選框，則只會獲得該項目出來，設置樣式：

var myStorageData = localStorage.getItem('mydata'); 
document.getElementById('somecheckbox').style.display = JSON.parse(myStorageData).somecheckbox;

注意你一定要來包裝一些邏輯到功能複用和解析，以避免異常之前做一些防禦性的編碼。

這是一個Fiddle，通常表明上述答案。

來源

2015-07-20 13:21:37 JasonWilczak

使用本地存儲來記住css顯示值

回答

相關問題