Установить cookie, используя jquery, bodyclass из cookie при загрузке страницы

Question

У меня есть кнопка, которая устанавливает класс тела в.blackout

Я использую js-cookie для установки cookie, и с моей кнопкой связан следующий код.

<script>
$('#boToggle').on('click', function(e) {
  $('body').toggleClass('blackout'); 
});
</script>

Что я не могу понять, это как использовать Cookies.set('name', 'value'); по ссылке выше установить cookie с помощью.toggleClass И как извлечь его из cookie и применить к классу тела.

Заранее спасибо!

Answer 1

Похоже, что вы хотите поддерживать состояние вашего переключенного класса между сеансами, что можно сделать с помощью файлов cookie, но, возможно, лучше подойдет для localStorage.

Для полноты картины я продемонстрирую оба подхода

С печеньем

Чтобы лучше понять разницу между Cookies и локальным хранилищем, посмотрите этот вопрос, но я искренне думаю, что вы можете использовать любой из этих подходов. В этом случае локальное хранилище имеет преимущество перед файлами cookie в том, что вам не понадобится дополнительная библиотека.

let state = Cookies.get('toggle');
$(body).toggleClass('.blackout', state)

С локальным хранилищем

let state = localStorage.getItem('toggle');
$(body).toggleClass('.blackout', state)

С вашим обновленным фрагментом

var toggleLocalStorage = localStorage.getItem('toggle');
var toggleStatus = toggleLocalStorage ? toggleLocalStorage : false;

$('#boToggle').on('click', function(e) {
  $('body').toggleClass('blackout', toggleStatus);
  localStorage.setItem('toggle' toggleStatus);
});