Принцип работы localstorage
При работе с Local Storage , у меня возникла проблема. При загрузке данных из LS все работает нормально, как и ожидается. Однако, код, отвечающий за изменение состояния чекбоксов (если чекбокс не пустой, то он должен быть отмечен), не реагирует на изменения, которые произошли после получения данных из LS. Как можно решить эту проблему? (document.addEventListener('DOMContentLoaded', function () {} (не помогло))
1.КОД ДЛЯ восстановления данных из ls
// Восстанавливаем данные на форме из сохраненных значений
// Получаем сохраненные данные из localStorage и восстанавливаем поля формы
let itemData = {};
// Проверяем, есть ли сохраненные данные в localStorage
if (LS.getItem('formData')) {
// Если есть, извлекаем их и преобразуем в объект
formData = JSON.parse(LS.getItem('formData'));
// Проверяем, есть ли данные для данной формы (FormName)
if (FormName in formData) {
// Если есть, сохраняем их в itemData
itemData = formData[FormName];
}
}
// Перебираем ключи в объекте itemData
for (let key in itemData) {
// Получаем элемент формы с соответствующим ключом
const element = form.elements[key];
// Если элемент не найден, пропускаем итерацию
if (!element) continue;
// Проверяем, является ли ключ массивов (содержит "[]")
const isArrayKey = key.includes("[]");
if (Array.isArray(itemData[key])) {
// Если значение в itemData является массивом
// Получаем элементы массива
const mas = element;
// Перебираем элементы массива
for (let i = 0; i < mas.length; i++) {
if (element[i].type === 'date') {
// Если элемент является типом "date", устанавливаем значение из itemData
mas[i].value = itemData[key][i];
}
}
}
console.log('isArrayKey:', isArrayKey);
if (isArrayKey) {
// Если ключ содержит "[]"
// Получаем элементы массива
const mas = element;
// Перебираем элементы массива
for (let i = 0; i < mas.length; i++) {
if (itemData[key].includes(mas[i].value)) {
// Если значение из itemData включает значение элемента, устанавливаем его как выбранное
mas[i].checked = true;
console.log('mas:', mas);
console.log('itemData:', itemData);
}
}
} else if (element.type === 'checkbox' && itemData[key] === 'on') {
// Если элемент является чекбоксом и значение в itemData равно 'on', устанавливаем его как выбранный
element.checked = true;
} else {
// В остальных случаях устанавливаем значение элемента из itemData
element.value = itemData[key];
}
2.это код для изменений состояния чекбоксов
// Получаем все элементы с классом 'checkbox'
const checkboxes = document.querySelectorAll('.checkbox');
// Для каждого элемента с классом 'checkbox' добавляем обработчик события 'change'
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', () => {
// Находим ближайший элемент 'label' для данного чекбокса
const label = checkbox.closest('label');
// Если чекбокс отмечен, добавляем класс 'checked' элементу 'label', иначе убираем его
if (checkbox.checked) {
label.classList.add('checked');
} else {
label.classList.remove('checked');
}
});
});