с использованием локального хранилища для запоминания значения css display

Question

У меня есть контрольный список, построенный в html/javascript, и вы можете показать/скрыть каждый раздел контрольного списка, щелкнув стрелку, но я хочу использовать локальное хранилище, чтобы помнить, был ли показан каждый элемент или скрытый последний раз, когда приложение было использовано, а затем загрузило страницу точно так же, как это было в последний раз, когда она была использована. Поэтому, если все элементы контрольного списка, которые были показаны в последний раз, когда пользователь использовал приложение, я хочу, чтобы все элементы контрольного списка отображались в следующий раз, когда они используют приложение. но я не уверен, как получить javascript/localstorage, чтобы запомнить значение отображения css. Возможно, это не лучший способ решить эту проблему. Любые идеи или советы будут оценены.

Answer 1

Не используйте его для хранения значения css, просто используйте его для сохранения последнего состояния флажка. Поэтому, если они проверяют флажок, сохраните значение в localstorage, как отмечено для этого флажка. И затем, когда страница загружается, получите состояние всех флажков из localstorage, и вы можете переключить их все на свое предыдущее состояние. Состояние флажка будет управлять классом css, который будет применяться к ним.

Answer 2

Чтобы использовать локальное хранилище, необходимо помнить, что строки хранятся. Вы можете использовать объект JSON, стробированный, для хранения данных.

Используйте флажок идентификатор в качестве свойства, и это стиль отображения в качестве значения:

Сначала получить флажок по идентификатору (может быть сделано в цикле):

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

Тогда вам нужно получить текущая строка хранения:

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

и проверить, если он существует, и если да, то разобрать его на объект, в противном случае создать новый объект:

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

Наконец, установить свойство объекта, на основе ид флажка и установить хранение с новыми значениями:

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, который в целом демонстрирует приведенный выше ответ.