У меня есть HTML-страница с множеством полей, и в каждом поле, которое я щелкаю, я хочу применить новый класс CSS, который меняет цвет фона и сохраняет прогресс. Я пытаюсь сохранить этот новый класс CSS в локальном хранилище, но я делаю что-то не так. Может ли кто-нибудь помочь мне?
код JS:
let box = document.querySelector(".box");
let box_1 = document.querySelector(".box-1");
let box_2 = document.querySelector(".box-2");
const next = document.querySelector(".next");
document.onload=(function(){
var activestate = localStorage.getItem('activestate');
if (activestate !== ''){
box.classList.add('active');
};
});
box_1.addEventListener('click', function(){
box_1.classList.add('active');
box_2.classList.remove('disabled-link');
localStorage.setItem('activestate', 'active');
});
box_2.addEventListener('click', function(){
if (box_1.classList.contains('active')) {
box_2.classList.add('active');
localStorage.setItem('activestate', 'active');
next.style.display = "block";
};
});
вот полный код в Codepen: https://codepen.io/giuse187/pen/zYLrdMe
🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.
Замените «document.onload» на «window.addEventListener».
`
window.addEventListener('load', function() {
var activestate = localStorage.getItem('activestate');
if (activestate !== null && activestate !== '') {
box.classList.add('active');
}
});
`
Ваша функция onload неверна, поэтому вы не получаете результатов.
Вместо этого используйте window.load-
window.onload = () => {
// YOUR CODE
};
Я бы предложил использовать событие onload для вашего элемента body, что является рекомендуемым способом обработки вещей при загрузке страницы.
<body onload = "checkStorage()">....your elements...</body>
А на стороне Js сделайте вот так:
function checkStorage() {
var activestate = localStorage.getItem('activestate');
if (activestate !== ''){
box.classList.add('active');
};
}