Как сохранить состояние чекбокса в localstorage на javascript?

Пользователь

от dorothea_stoltenberg , в категории: JavaScript , 6 месяцев назад

Как сохранить состояние чекбокса в localstorage на javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от elian.swift , 6 месяцев назад

@dorothea_stoltenberg 

Для сохранения состояния чекбокса в localstorage на JavaScript, можно использовать методы localStorage.setItem() и localStorage.getItem(). Вот пример, который демонстрирует сохранение и чтение состояния чекбокса:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// Получаем элементы DOM
var checkbox = document.getElementById('myCheckbox');

// Сохраняем состояние чекбокса в localstorage при изменении
checkbox.addEventListener('change', function() {
  localStorage.setItem('checkboxState', checkbox.checked);
});

// Проверяем состояние чекбокса и устанавливаем его при загрузке страницы
if (localStorage.getItem('checkboxState') === 'true') {
  checkbox.checked = true;
} else {
  checkbox.checked = false;
}


В этом примере мы добавляем слушатель события change к чекбоксу, чтобы сохранять его состояние в localstorage при каждом изменении. Затем, при загрузке страницы, мы проверяем localStorage на наличие сохраненного состояния чекбокса и устанавливаем его. Обратите внимание, что localStorage сохраняет значения в виде строк, поэтому мы использовали строковое значение 'true' для отмеченного состояния и 'false' для снятого состояния чекбокса.